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圏 本 書 の サン プル ファ イル に つい て 
本 書 の な か で 使用 され て いる サン プル ファ イル は 以下 の URL か ら ダ ウン ロー ド で きま す 。 
http://book.mynavi.jp/Support/pc/4348/ 


筐 サン プル ファ イル の ダウ ン ロ ー ド に は イン ター ネッ ト 環 境 が 必要 で す 。 


人 @ サ ンプ ルフ ァイル は すべ て お 客 様 自身 の 責任 に お いて ご 利用 くだ さい 。 サ ンプ ルフ ァイル お よび 動画 を 使用 し た 結果 で 
発生 し た いか な る 損害 や 損失 、 その他 いか な る 事態 に つい て も 、 弊 社 お よび 著作 権 者 は 一 切 その 責任 を 負い ませ ん 。 


人 @ サ ンプ ルフ ァイル お よび 動画 ファ イル に 含ま れる デー タ や プロ グラ ム 、 フ ァイル は すべ て 著作 物 で あり 、 著 作 権 は それ 
ぞ れ の 著作 者 に あり ます 。 本 書籍 購入 者 が 学習 用 と し て 個人 で 閲覧 する 以外 の 使用 は 認め られ ませ ん の で 、 ご 注意 くだ 
さい 。 営利 目的 ・ 個 人 使用 に か か わら ず 、 デ ー タ の 複製 や 再 配布 を 禁じ ます 。 


注意 
価 本 書 で の 説明 は 、Mac OS X、Google Chrome (一 部 その 他 の ブラ ウザ ) で 行っ て いま す 。 
環境 に より 表示 が 異な る 場合 が あり ます の で ご 注意 くだ さい 。 
本書 制作 時 (2012 年 7 月 )、HTML5 と CSS3 の 仕様 は 勧告 に 至っ て いな い 状 態 で あり 、 執 筆 以降 に 変更 され る 可能 性 が 
あり ます 。 
借 本 書 に 登場 する ソフ トウ ェ ア や URL の 情報 は 本 書 初 版 第 1 刷 時 点 (2012 年 7 月 ) で の も の で す 。 
執筆 以降 に 変更 され る 可能 性 が あり ます 。 
但 本 書 の 制作 に あたっ て は 正確 な 記述 に つと め ま し た が 、 著 者 や 出版 社 の いずれ も 、 本 書 の 内 容 に 関し て 何ら か の 保証 を 
する も の で は な く 、 内 容 に 関す る いか な る 運用 結果 に つい て も 一 切 の 責任 を 負い ませ ん 。 あ ら か じ め ご 了承 くだ さい 。 
借 本 書 中 の 会 社名 や 商品 名 は 、 該 当 する 各社 の 商標 また は 登録 商標 で す 。 
本 書 中 で は 'W ゆ お よび ⑧ マ ー ク は 省略 させ て いた だ いて お り ま す 。 


の 


まえ が き 


本 書 は 、 こ れ か ら 新 し く HTML と CSS を 学び は じ め る 人 向け の 入門 書 で す 。 い ま 現 在 の 、 
この タイ ミン グ で 学び は じ め る わけ で すか ら 、 最 新 バ パー ジョン の HTML5 と CSS3 を ベー ス と 
し た 総合 的 な 内 容 と な っ て いま す 。 

この 本 の 企画 を 進め る に あたっ て は 、 ク リア すべ き 課題 が 2 つ あ り ま し た 。 ひ と つ は 、 全 体 
の ボリ ュー ム の 問題 で す 。 普通 に HTML5 と CSS3 の 両方 を 解説 する と 、500 ペ ー ジ は 軽く 越 
えて し まう こと が 予想 され まし た 。 し か し 、 初 心 者 向け の 本 を 、 見 た だ け で 「 ち ょ っ と 無理 ] 
と 感じ て し まう ほど 分 厚く さす る わけ に は いき ませ ん 。 も う ひ と つ は 、 構 成 上 の 流れ の 問題 で す 。 
普通 に 考え られ る 順序 で 解説 する と 、 先 に HTML を 学習 し て か ら そ れ を 前 提 と し て CSS を 学 
ぶ 、 と いう 流れ に な り 、 前 半 は タグ の 意味 を 覚え る こと が 中 心 の 退屈 な 内 容 に な っ て し まう と 
いう 点 で す 。 学習 を 開始 し た 早々 、 眠 く な る よう な 説明 が 延々 と 続い た の で は 前 向き に 頑張 る 
気持 ち も 失 せ て し まう か も し れ ま せん 。 

ひと つめ の 課題 に つい て は 、「 現 時 点 で ほとん ど 使 われ て いな いも の 、 仕 様 が 不安 定 な も の 
に つい て は 掲載 し な い 」 と いう 方 針 に する こと で クリ ア し まし た 。 ご存知 の 方 も 多い か と 思い 
ます が 、HTML5 と CSS3 は その 大 部 分 が まだ 未完 成 で あり 、 現 在 で も 少し ずつ 変更 され て い 
ます 。 ま だ 正式 に 決ま っ て も いな い 内 容 を 入門 書 で 事細か に 解説 する こと は 、 あ まり 意味 の あ 
る こと だ と は 思え ませ ん 。 入門 者 が 覚え る べき こと は 、「 将 来 そ う 決 まる か も し れ な い 仕 様 書 
の 内 容 ] で は な く 、「 今 現在 の 実践 的 な 制作 の と き に 必要 と な る 知識 ] で ある か ら で す 。 

も う ひ と つの 課題 に 関し て は 、 は じ め は 仕方 が な いと 考え て いま し た 。CSS は HTML に 対 
し て 適用 する も の で あり 、 ど うし て も 先 に HTML を 覚え る 必要 が ある か ら で す 。 し か し ある と 
き 、 べ つ に HTML の すべ て を 覚え て か ら CSS に 進む 必要 も な いと 気づき 、 執 筆 の 途中 で 構成 
全体 を 作り 直し まし た 。HTML と CSS を 少し ずつ 同時 進行 させ る こと に し た の で す 。 こ の よ 
うな 進め 方 に する と 、 覚 えた 内 容 が すぐ に ブラ ウザ で の 表示 結果 と し て あら われ る た め 、 少 し 
ずつ で きる よう に な っ て いく 感覚 を 積み 重ね な が ら 学 習 を 進め て いく こと が で きま す 。 た だ し 
その 分 、 各 段階 で は HTML も CSS も 限定 され た 範 団 ま で し か 使え な いこ と に な る た め 、 新 し 
い 構 成 を 考え る 作業 は まる で パズル で も 解く か の よう な 複雑 な 作業 と な る こと が 予想 され まし 
た 。 し か し 今回 は あえ て それ に 挑戦 し て みる こと に し た の で す 。 そ の 甲斐 も あっ て 、HTML と 
CSS が 同時 進行 で 学べ る 新しい タイ プ の 教科 書 が 完成 し まし た 。 

本 書 を 、 こ れ か ら HTML と CSS を 覚え る 人 が “楽し みな が ら 学 ぶ " た め の 入 門 書 と し て ご 
活用 いた だ け ま し た ら 幸 いで す 。 


2012 年 7 月 
大 藤 幹 
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ゆ 対 応 マ ー ク に つい て 
本 書 の Chapter 4 以降 で は 、 説 明 項 目 の 一 部 の 見 出し に HTML や CSS の バー ジョ ン を 示す 対応 マー 
ク が 付い て いま す 。 














セク ショ ン を あら わす 要素 | imwswl! 











対応 マー ク 


と ぁ 疑似 要素 | icssswl| 


対応 マー ク の 示す 意味 は 以下 の 通り で す 。 











HTML5 新 …… HTML5 で 新しく 登場 し た 項目 、 ま た は 、 大 きい 変更 が あっ た 項目 で す 。 

HTML5 改 …… HTML4.01/XHTML1.0 か ら 変更 が 加え られ た 項目 、 ま た は 一 部 に 新しい 機能 が 加わ 
っ た 項目 で す 。 

CSS3 新 ……… CSS3 で 新しく 登場 し た 項目 、 ま た は 、 大 きい 変更 が あっ た 項目 で す 。 

CSS3 改 ……… CSS2.1 か ら 変 更 が 加え られ た 項目 、 ま た は 一 部 に 新しい 機能 が 加わ っ た 項目 で す 。 





HTML や CSS の バー ジョ ン と は 特に 関係 の な い 内 容 で ある か 、 概 要 を 説明 し て いる た め バ パー ジョ ン 
対応 で 考え る こと が そぐわ な い 内 容 、 ま た は 、 以 前 の バー ジョ ン と ほぼ ば 同じ 内 容 で ある 場合 は 対応 マ 
ー ク は 付い て いま せん 。 


ゆ ソ ー ス コー ド に つい て 
本 書 に は 、 ダ ウン ロー ド 可 能 な サン プル ファ イル が 用 意 さ れ て いま す 。 


ダウ ン ロ ー ド サイ ト 
http://book.mynavi.jp/Support/pc/4348/ 


対応 する サン プル ファ イル が ある 場合 は 、 紙 面 に パス の 表記 が あり ます 。 勉強 の 参考 に し て みて くだ 
さい 。 





み の 1 行 あい て いる と ころ (<body> とく < く /body> の 間 ) に ペー スト し て くだ さい 。 


sample/chapter-02/lecture-2-2/03.html 


01 <!DOCTYPE htm1l> 
02 <html> 
03 <head> 


サン プル ファ イル の バス 

















n4 四 oe 
※ 本 書 に 掲載 され て いる ソー スコ ー ド の 左側 に ある 行 番号 は 、 ソ ー ス コー ド の 一 部 を 抜粋 し て 掲載 し て いる 場合 で も 常に 1 か ら の 連 番 
と な っ て いま す 。 サ ンプ ルフ ァイル の 行 番号 と も 一 致し て いな い 場 合 が あり ます の で 注意 し て くだ さい 。 
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ネッ ト の 宜 要 と サー バー 
開 する 際 に 必要 と な 
説明 し ます 。 さ っ と 


ペー ジ を 制作 し て 公 
の 基礎 事項 に つい て 
知っ て いる 内 容 だ 


の 役割 、Web 
る ン ソフトウェア な ょ 
流し 読み し て みて 、 

て も OK で す 。 


“思っ た 方 は 読み 飛ば し 








イン ター ネッ ト と サー バー に つい て 


本 書 を 読む と Web ペ ー ジ が 作れ る よう に は な り ま す が 、 自 分 の パソ コン 上 で Web ペー ジ を 完 
成 さ せ た ら それ が 自動 的 に イン ター ネッ ト で 公開 され て 誰 で も 見 られ る よう に な る 、 と いう わ 
け で は あり ませ ん (も し そう だ と し た ら 、 自 分 の パソ コン の ファ イル が すべ て イン ター ネッ ト 
上 で 公開 され て いる こと に な り ま す )。 こ こ で は まず 、 イ ンタ ーネット の お お ま か な 仕 組み と 、 
サー バー の 役割 に つい て 確認 し て お きま し ょ う 。 


と: イン ター ネッ ト の 仕組 み 


イン ター ネッ ト と は 、 簡 単に 言え ば 「 世 界 中 に ある 個別 の ネッ トワ ー ク を 一 定 の 決ま り (TCP/IP) 
に 従っ て 結び つけ て いる 世界 規模 の ネッ トワ ー ク | の こと で す 。 家庭 や 企業 か ら イ ンタ ーネット を 
利用 する た め に は 、 す で に イン ター ネッ ト に 接続 され て いる プロ バイ ダ ( 接 続 業 者 ) と 契約 し て 、 そ 
こ か ら 接 続 す る こと に な り ま す ( 接 続 方 法 に は 光ファイバー や ケー ブル テレ ビ の 回 線 、ADSL な ど 
色々 あり ます )。 





























イン ター ネッ ト の イメ ー ジ 図 
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と [イン ター ネッ ト に Web ペー ジ を 公開 する | と は 





私 た ち が 普 段 イ ンタ ーネット 上 の Web ペ ー ジ を 見 て いる と き 、 そ の ネッ トワ ー ク 上 で は 「 こ の ア 
ドレ ス の ペー ジ を 見 せ て くだ さい 」「 は い ど う ぞ これ が その デー タ で す 」 と いっ た や り と り が 何 度 も 
行わ も て いま す 。 そ の よう な ユー ザー( ブ ラウ ザ ) と の や り と り を 行い 、 ユー ザー か ら の 要求 に 応え 
て デー タ を 渡す ソフ トウ ェ ア の こと を 大 二 が 三 還 ウ ブドウ エア と 呼ん で いま す ( そ し て サー バー・ ソ 
フト ウェ ア が 動作 し て いる コン ピュ ー タ の こと を サー バー と 言い ます )。 つ まり 、 イ ンタ ーネット 
上 で Web ペー ジ を 公開 する に は 、 サ ー バ ー・ ソ フト ウェ ア が 動作 し て いる コン ピュ ー タ に デー タ を 
入れ る か 、Web ペ ー ジ の デー タ が 入っ て いる パソ コン で サー バー・ ソ フト ウェ ア を 動か す 必要 が あ 
る と いう こと で す 。 






























この アド レス の ペー ジ を 見 せ て くだ さい 
ペーーーーーーーーーーーーーーーーーーーーーーー 
mm 
すみ ませ ん 、 そ の ペー ジ は 存在 し ませ ん 

















サー バー の 役割 の イメ ー ジ 図 








ぁみ Web ペー ジ を 入れ る 場所 に 注意 


た だ し 、 サ ー バ ー・ ソ フト ウェ ア が 動い て いれ ば どの ファ イル で も 公開 され て し まう の か と いえ ば 、 
そう で は あり ませ ん 。 公開 する の は サー パー* ワ フト ウェ ア で 設定 じ て で いる 特定 の フォ ル ダ ダ 内 に 限 
定 さ れ ま す 。 そ れ は も ちろ ん 、 セ キュ リティ 上 の 問題 が ある か ら で す 。 し た が っ て 、 イ ンタ ー ネ ッ 
ト 上 で 公開 する た め の Web ペ ー ジ が 完成 し た ら 、 サ ー バ ボー が 動い で いる コン ピュ ー タ 上 の 特定 の 
フネ キル ダ の 中 に 愉 れ る こと に よっ て 、 そ の デー タ は 初め て イン ター ネッ ド ト 上 で 公開 され る こと に な 
り ま す 。 多く の 場合 、 プ ロバ イダ と 契約 する と 、 プ ロバ イダ の サー バー に その よう な 公開 用 の フォ 
ル ダ が 用 意 さ れ て いて 、 契 約 時 に どこ に デー タ を 入れ れ ば よい の か 案内 が あっ た は ず で す 。 ま た 、 
一 般 に プロ バイ ダ が 用 意 し て いる サー バー の 容量 は 少な めで さま ざま な 制限 も ちあ る た め 、 接 続 用 の 
プロ バイ ダ の ほか に 自由 度 の 高い レン タル サー バー (これ は 接続 業者 で は な く Web ペ ー ジ を 置く ス 
ペー ス を 提供 する サー ビス ) を 借り る 場合 も ある か と 思い ます 。 そ の 場合 は 、 レ ンタ ル サ ー バ ー 内 
の 指定 され た フォ ル ダ に デー タ を 入れ る こと に な り ま す 。 


この よう に する こと で 、 制 作 し た Web ペ ー ジ は 初め て イン ター ネッ ト 上 で 公開 され 、 誰 で も 自由 
に 閲覧 で きる よう に な り 、Google な どの 検索 エン ジン に も 登録 され て 検索 結果 と し て 表示 され る 
よう に な り ま す 。 制作 し た Web ペ ー ジ を サー バー 内 の 特定 の フォ ル ダ に 入れ る た め の ソ フト ウェ 
ア に つい て は 、 次 の 「Lecture 1-2 本 書 で 使用 する ソフ トウ ェ ア に つい て 」 で 説明 し ます 。 


CgAPTE ょ k ! は じ め る 準備 





本 書 で 使用 する 
ソフ トウ ェ ア に つい て 


Web ペ ー ジ を 制作 する に は 専用 の ソフ トウ ェ ア が 必要 だ と 思っ て いる 人 も いる か も し れ ま せ 
ん が 、 決 し て そん な こと は あり ませ ん 。 な ぜ な ら 、HTML も CSS も JavaScript も 、 実 際 に は 
た だ の テキ スト ファ イル (文字 デー タ だ け を 含む ご く 一 般 的 な ファ イル 形式 ) だ か ら で す 。 つ ま 
り 、Windows に 付属 の 「 メ モ 帳 ] や 、Mac に 付属 の 「 テ キス ト エ ディ ッ ト 」 な ど が あれ ば 
Web ペー ジ を 制作 する こと は 可能 な の で す 。 

た だ し 、「 メ モ 帳 ] や 「 テ キス ト エ ディ ッ ト 」] で も た し か に 制作 は 可能 で す が 、 も っ と 使い 心 
地 が よく て 効率 的 に 制作 で きる ソフ トウ ェ ア も 無料 で 公開 され て いま す 。 ま た 、 制 作 し た 
Web ペ ー ジ が さま ざま な 環境 で うま く 表 示さ れる か どう か を 確認 する た め に は 、 チェ ッ ク 用 
の ブラ ウザ も 用 意 し て お く 必 要 が あり ます 。 さ ら に 、 最 終 的 に で き あ が っ た Web ペ ー ジ を 公 
開 す る に は 、 そ れ ら を サー バー の 特定 の フォ ル ダ に 転送 し な けれ ば な り ま せん 。 こ こ で は まず 、 
その よう な 場面 で 必要 と な る ソフ トウ ェ ア を 、 無 料 で 入手 で きる も の を 中 心 に 紹介 し て お き 
ます 。 


ぁみ テキ スト エディ タ 


テキ スト エディ タ (text editor) と は 、 文 字 を 入力 ・ 編 集 し テキ スト ファ イル と し て 保存 する た め の 
ソフ トウ ェ ア の こと で す 。 身近 な 例 と し て は 、Windows に 付属 し て いる 「 メ モ 帳 ] や Mac に 付属 
し て いる 「 テ キス ト エ ディ ッ ト ] が 挙げ られ ます 。 


本 書 で 学ぶ HTML5 も CSS3 も 、 フ ァイル の 形式 と し て は テキ スト ファ イル で ある た め 、Windows 
な ら 「 メ モ 帳 ]、Mac な ら 「 テ キス ト エ ディ ッ ト ] で 問題 な く 作 成 で きま す 。 特 に HTML5 や CSS3 
を 学ぶ た め に ちょ っ と し た サン プル を 作っ た りす る だ け な ら 、 そ れ ら で 十分 で ある と も 言え ます 。 
「 メ モ 帳 ] な ら 特 に 設定 な ど を 変更 する こと な くそ の まま 使え ます し 、「 テ キス ト エ ディ ッ ト ] で も 
「 環 境 設定 ] で フォ ー マ ッ ト を 「 標 準 テ キス ト ] に し て 、「 開 く ン 保存 ] の ペー ジ に ある 「HTML フ 
ァイル 中 の リッ チ テ キス トコ マン ド を 無視 ]」 に チェ ッ ク を 入れ る だ け で 使用 で きま す ( 次 ペー ジ の 
図 を 参照 )。 
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フォ ー マ ッ ト 


理 融 ご と に 設定 を 選択 する に は 、“ フ ォ ー マ ッ ト - メ ニュ ー を 使用 し て 
くだ さい 。 


リッ チ テ キス ト 




















ペー ジ サ イズ で 表示 

@⑨ 時 チャ スト ファ イル を 保存 する と き : 
ウイ ンド ウサ イズ ( 森 陳 デキ スト ファ イル に 竹生 子 ・ "を 造 加 
em 
ei 5 | 生 末 準 テキ スト ファ イル の エン コー ディ ング 。 
上 ほ ファ イル を 必 く と き : | 自動 ロ 
林 準 テキ スト の フォ ント : | 変更 -。 |Monaco10 ファ イル を 保存 す る と き : | 日 
リッ チ テ キス ト の フォ ント : 変更 .。 |Helvetica 12 ITTML 人 存 オプ ショ ン 
プロ パテ ィ ーーーーーー ーー ーー 
秋天 の プロ パテ ィ は 、 リ ッ チ テキ スト ファ イル で の み 使 用 で きま す 。 ae 
ag "ファ イル ">* プ ロ パ ティ を 表示 と 選択 スタ イル : 理 め 込み の CSS 日 
2 エン コー ディ ッ グ : | umcooe (orrrD il 
作成 者 [ 0 
所 放 : 「 に た に は 1 
コピ ー ラ ィ ト : | 
オプ ショ ン 
軌 入力 中 に 自動 スペ ル チ ェ ッ ク 他 スマ ー ト コピ ー ノ ペー スト 
スペ ル と 一 細 に 文法 を チェ ッ ク 。 -」 スマ ー ト 引用 特 
他 スペ ル を 自動 的 に 修正 | スマ ー ト ダッ シュ 記 人 
慰 ルーラ を 表示 スマ ー ト リン ク 
データ 検出 テキ スト の 秋 換 

すべ て を デフ ォ ルト に 戻す | | すべ て を デフ ォ ル ト に 戻す 





テキ スト エディ ッ ト の 「 環 境 設定 ] 画面 。 HTML5 や CSS3 を 編集 する 場合 は 、 フ ォ ー マ ッ ト を 「 標 準 テキ スト ] に し 、 
[開く ンプ 保存] の ペー ジ に ある 「HTML フ ァイル 中 の リッ チ テ キス トコ マン ド を 無視 ] に チェ ッ ク を 入れ る 


し か し 、HTML5 と CSS3 を 少し で も 早く 効率 的 に 学習 し た いと 考え て いる の で あれ ば 、 早 い 段 階 
の うち に 自分 に 合っ た テキ スト エディ タ を 用 意 し て お いた 方 が 良い で し ょ う 。 一 般 的 な テキ スト エ 
ディ タ に は 、 そ れ が 無料 の も の で あっ て も 、 ソ ー ス コー ド *' を より 読み や すく し て 入力 も 容易 に す 
る 多く の 機能 が 搭載 され て いる か ら で す 。 た と えば 、 行 数 を 表示 する こと は も ちろ ん 、 タ グ や キー 
ワー ド な ど を 色分け し て 表示 する 機能 や 入力 を 補う 機能 な どの ほか 、 そ れ ぞ れ の テキ スト エディ タ 
に は 固有 の 便利 な 機能 が 組み 込ま れ て いま す 。 

テキ スト エディ タ を 使う の が 初め て と いう 方 は 、 は じ め は 以下 の よう な 無料 の も の を 試し て みて 、 
必要 に 応じ て 有料 の も の を 使用 する と 良い で し ょ う 。 


ゆい Windows 
・MKEditor for Windows 


http://www.mkK-sSquare.Com/ 


・TeraPad 
http://www5f.biglobe.ne.jp/-t-susumu/library/tpad.html 


・ サク ラ エ ディ イタ 
http://sakura-editor.Sourceforge.ne/ 


※1: HTML( マ ー ク アッ プ 言 語 ) や CSS (スタ イル シー ト 言 語 )、 プ ログ ラミ ング 言語 な どの 言語 に よる 命令 ・ 指 示 な ど を 記述 し た 
テキ スト を ソー スコ ー ド (source code) と 言い ます 。 省 略し て 「 ソ ー ス ] と 呼ば れる こと も あり ます 。 


oO!6 CaAPTE ょ ! は じ め る 準備 





介 Mac 
・mi 
http://www.mimikaki.net/ 


・CotEditor 


http://sourceforge.jp/projects/coteditor/ 


高 機能 で 有料 の テキ スト エディ タ と し て は 、Windows で は 「 秀 丸 エ ディ タ 」、Mac で は 「Jedit X] 
が 有名 で す 。 ち な み に 本 書 の 原稿 は その 「Jedit X] で 書か れ て いま す 。 


みな さん は 、 い つも 自分 の お 気に入り の ブラ ウザ (Web ブラ ウザ ) を 使っ て 、 さ ま ざ ま な Web ペ ー 
ジ を 閲覧 し て いる こと と 思い ます 。 自 分 が ユー ザー と し て 閲覧 し て いる と き に は それ で まっ た く か 
まわ な い の で す が 、 作 る 側 に な る と それ だ け で は 足り ませ ん 。 想 定 さ れる ユー ザー が 使用 し て いる 
と 思わ れる 各種 ブラ ウザ で 正しく 表示 され て いる こと を 確認 する 必要 が ある た めで す 。 

た と えば 、 本 書 で 学習 する HTML5 と CSS3 を 問題 の な い 状態 で 表示 させ る た め に は 、Google 
Chrome や Safari、Firefox な どの で きる だ け 新 し い バ ー ジ ョ ン を 使用 する 必要 が あり ます 。 
Internet Explorer で は 、 バ ー ジ ョ ン 9 で あっ て も 未 対応 の 機能 が 多 す ぎ て 、HTML5 と CSS3 の 多 


く の 機 能 が 確認 で き な い こと に な り ま す 。 
その 一 方 で 、 も し 仕事 で て Web ペー ジ を 
制作 する の で あれ ば 、 逆 に 多く の 機能 
に 未 対応 の Internet Explorer の いく つ 
か の バー ジョ ン を 用 意 し て お く 必 要 も 
あり ます 。 さ まさ ざま な 機能 に 未 対応 の 
ブラ ウザ で どの よう に 表示 され る の か 
も 確認 する 必要 が ある か ら で す 。 ユ ー 
ザー が 多く いる と 想定 され る ブラ ウザ 
で は 、 た と え ブ ラウ ザ 側 に 問題 が あっ 
て 表示 結果 が 変わ っ て し まう と し て も 、 
少な く と も 書い て ある 内 容 が きち ん と 
読め る よう に し て お か な けれ ば な り ま 
せん 。 

本 書 で は 、Google Chrome を 基本 ブラ 
ウザ と し て 学習 を 進め て いき ます 。 





偽 chrome 
Geogle が つく っ た プラ ウザ 


まで た ウイ ンタ ーネット を さく - 生 に 。 
プラッ ジン グ に ひと つ 先 の と こち よさ を 本 し ます 











で YouTube を 
つか うと まき に 
3 1 は さ ェ < 
















| aaawns soaaa マ ッ Camewmms ち 。 三 ER で ぶ omaeomome の イン スネ トール と 
Google Chrome の ダウ ン ロ ー ド ペー ジ 。 本 書 で は 、Google Chrome を 
基本 ブラ ウザ と し て 学習 を 進め て いく 
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Safari や Firefox の 最新 バー ジョ ン で も 基本 的 に は 同様 の 表示 結果 が 得 ら れる と 思わ れ ま す が 、 掲 
載 さ れ て いる サン プル な どの スク リー ン シ ョ ッ ト は Google Chrome の も の で す ( 必 要 に 応じ て 他 
の ブラ ウザ の スク リー ン シ ョ ッ ト も 掲載 し ます が 、 そ の 場合 は どの ブラ ウザ か を 明記 し て あり ま 
す )。 し た が っ て 、 本 書 で HTML5 と CSS3 を 学ん で いく だ け で あれ ば 、 ブ ラウ ザ は Google Chrome 
を 用 意 す る だ け で OK で す 。 も し 、 一 般 公 開 する 予定 の Web ペ ー ジ を 作る の で あれ ば 、 想 定 さ れ 
る 読者 の 多く が 利用 し て いる と 思わ れる ブラ ウザ を 用 意 し て 、 表 示 確 認 を する 必要 が あり ます 。 各 
種 ブ ラウ ザ を ダウ ン ロ ー ド する に は 、 ブ ラウ ザ の 名 前 で 検索 し て みて くだ さい 。 最新 バー ジョ ン の 
ダウ ン ロ ー ド ・ ペ ー ジ が すぐ に 見 つか り ま す 。 


ぁみ FTP クラ イア ント 


サー バー に は いろ いろ な 種類 が あり ます 。 ブ ラウ ザ と や り と り を 行っ て Web ペ ー ジ が 見 られ る よう に 
し て いる サー バー は Web サ ー バ ー と 呼ば れ て いま す 。 それ に 対し て 、 フ ァイル を 転送 する 際 の や り と 
り を 行う た め に 用 意 さ れ て い 
る の が 町 P サ ー バ パー で す (FTP サー バー 自宅 や 会 社 の パソ コン 
は File Transfer Protocol の ド 誤 すま 王 避 
略 で す )。 Web サ ー バ ー と や 
り と り を 行う た め に ブラ ウザ 
を 使用 する よう に 、FTP サ ー 
バー と や り と り を 行う た め に 
は 固 訪 診 詳 師 胃 統 主 と いう 
ソフ トウ ェ ア を 使用 し ます 。 

















ファ イル 転送 の や り と り を 行う の が FTP サ ー バ ー と FTP ク ライ アン ト 


FTP ク ライ アン ト は 、 で き あ が っ た Web ペ ー ジ を 公開 する た め に 、 Web ペ ー ジ の デー タ を Web サ 
ー バ ー の 特定 の フォ ル ダ の 中 に 入れ る と き に 使用 し ます 。 Windows 版 の FTP ク ライ アン ト と し て は 、 
無料 で 利用 で きる 以下 の ソフ トウ ェ ア が 有名 で す 。 


s 提 EEIEP 
http://sourceforge.jp/projects/ffftp/ 


また 、 Firefox に 「FireFTP] と いう アド オン を 追加 する と 、 Windows 版 で も Mac 版 で も Firefox に 
FTP ク ライ アン ト の 機能 を 追加 する こと が で きま す (こち ら も 無料 で 使用 で きま す )。 


・FireFTP 
https://addons.mozilla.org/ja/firefox/addon/fireftp/ 


or! を CpAPrer ! は じ め る 準備 





Chapter 2 で は 、 まず は 難し し \ 話 は 抜き に し て 、 HTML と CSS 
し おま 
し 、 いて PTML と OS を 守 了 に 人 殺し て ッ ォ リー そこ で だ 
いた い の 感じ を つか ん で 、 ML も CSS も 意外 と 簡単 な ん な 
< 避 “いう こと を 実感 し て みて くだ さい 








HTML の 役割 、CSS の 役割 


まず は Web ペ ー ジ を 構成 する HTML と CSS に つい て 、 簡 単に その 概要 と 役割 を 押さ えて お き 


まじ ょ よう 。 


と HTML っ て と ん な モノ ? 


HTML と は 、 ご く 簡 単に 言え 
ば 、 テ キス ト に 移 湖 と 呼ば れ 
る 印 を 付け て 、 空 衝 旗 の 部 
分 が 何で ある の か を 示し た テ 
キス ト フ ァイル の こと で す 。 
それ ぞ れ の 印 は < 選 避 か ら 見 
出し > く < ここ まで 見 出し > と 
いう よう な パタ ー ン で あら か 
じ め 決 め ら れ て いて 、HTML5 
で は 約 100 種 類 あ り ます 。 

HTML を 学ぶ と いう こと は 、 
その 約 100 種 類 の 印 の 意味 を 
知り 、 印 の 付け 方 の ルー ル を 
開 雇 語 琴 較 だ と 言え ます 。 





テキ スト 
こぶ と り じ いさ ん 


昔々 、 あ る と ころ に 、 小 太り の お 爺さん が いま し た 。 


/ 


HTML 


く こ こ か ら 見 出し > 
こぶ と り じ いさ ん 
く こ こま で 見 出し > 


く こ こ か ら 本 文 > 
昔々 、 あ る と ころ に 、 小 太り の お 爺さん が いま し た 。 


く こ こま で 本 文 > 








【 
HTML の イメ ー ジ 。 テ キス ト に この よう な 書式 の 印 を 付け て 、 テ キス ト の 各部 分 が 何 
で ある の か を 示す 





し か し 、 印 の 種類 が 約 100 種 類 も ある か ら と いっ て 気 を 重く する 必要 は あり ませ ん 。 一般 的 な 
Web ペ ー ジ で ふだん 使用 され て いる の は 、 そ の 中 の ご く 一 部 だ か ら で す 。 す べ て を 暗記 する 必要 
は まっ た く あ り ま せん し 、 ふ だ ん 使う も の に 関し て は 使っ て いる うち に すぐ に 覚え られ ます の で 安 
心して くだ さい 。 こ の あと に 実際 に その 印 を 付け て み ま す が 、 あ っ け な い ほど 簡単 で す 。 








ぁみ: CSS っ て と ん な モノ ? 


それ に 対し て 、HTML の 印 に よっ て 示さ れ た 各 範 囲 の 表示 記法 を 指定 する の が CSS で す 。 た と えば 、 
HTML で 見 出し の 印 を つけ た 範囲 の 「 文 字 色 」「 背 景色 ]「 文 字 サ イズ ] な ど を 指定 で きま す 。 そ の 「 文 
字 色 ] や 「 背 景色 ] の よう に 表示 方 法 と し て 指定 で きる 種類 は 、HTML5 の 印 の 種類 より も か な り 
多く 、 ぜ ん ぶ だ と 軽く 150 以 上 は ある で し ょ う ( ま だ すべ て の 仕様 が 確定 し て いる わけ で は あり ま 
せん の で 最終 的 に どの くら い の 数 に な る か は 現時 点 で は 不明 で す )。 た だ し 、CSS に 関し て は まだ 
ブラ ウザ が サポ ー ト し て いな い 機 能 も 多く あり 、 現 実 的 に 使用 で きる の は だ いた い 100 種 類 く らい 








で ある と も 言え ます 。 
HTML CSS 
く こ こ か ら 見 出し > 見 出し { 
こぶ と り じ いさ ん 文字 色 : 黒 : 
く こ こま で 見 出し > 背景 色 : 白 : 
文字 サイ ズ : 24 ピク セル : 
く こ こ か ら 本 文 > } 
昔々 、 あ る と ころ に 、 小 太り の お 部 さ キ - 
ん が いま し た 。 本 文 { 
RI 文字 色 : グレ ー: 
く こ こま で 本 文 > 背景 色 : 白 : 
文字 サイ ズ : 16 ビク セル : 
行間 : 24 ピク セル : 
] 











CSS の イメ ー ジ 。HTML で 示さ れ た 各部 分 の 表示 方 法 を 指定 する 


HTML は 基本 的 に は 印 を つけ る だ け で す が 、CSS は 「 ど の 印 を つけ だ 範囲 ] の 「 何 ] を 「 ど う 表 
示さ せる | と いっ た 指定 を する 必要 が あり ます の で HTML より は 少々 複雑 で す 。 し か し 、 結 局 は 「 ど 
う 指定 すれ ば どう 表示 させ られ る の か ] と いう こと を 覚え る だ け で す の で 、 プ ログ ラミ ング 言語 の 
よう に 難し いわ け で は あり ませ ん 。CSS も この あと に 実際 に 使っ て み ま す が 、 指 定 方 法 の パタ ー 
ン さ え 覚 えれ ば 意外 に 簡単 で ある こと が 分 か る は ず で す 。 








HTML の タグ を つけ て みよ う ! 


いよ いよ ここ か ら は 、 手 を 動か し て タグ 付け を や っ て み ま し ょ う 。 使用 する サン プル ファ イル 
は ダウ ン ロ ー ド ファ イル に 含ま れ て いま す 。 


と > テキ スト を 「 大 見 出し 」 と 「 段 落 ] に 分 ける 


それ で は 、 実 際 に テキ スト に 印 を つけ て HTML に し て み ま し ょ う 。 HTML で は 印 の こと を タグ 
と 言い ます の で 、 以 降 本 書 で は タグ と いう 用 語 を 使用 し ます 。 タ グ を つけ る の は 、 以 下 の テ キス 
ト で す 。 


sample/chapter-02/lecture-2-2/01.txt 
か ちか ち 山 


昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま ]」 
と 呼ば れ て いま し た 。 山田 社長 に は 、 こ と ある ご と に 「Wwin-Min の 考え 方 が 大 切な ん で す 」 と 
語り だ す ク セ が あり まし た 。 


この テキ スト に タグ を つけ る 


さて 、 こ の テキ スト を 読ん で みる と 、 ど う や ら タ イド トル と 本 文 で 構成 され て いる らし いこ と が 分 か 
り ま す 。1 つ の ペー ジ 内 の 構成 要素 と し て 考え る と 、 天 見 出 じ と 最初 の 段落 で ある と も 言え そう で 
す 。 こ こ で は それ を 後者 で ある と 想定 し て 、 ま ず は 日 本 語 で く こ こ か ら 大 見 出し > < ここ まで 大 
見 出し > < ここ か ら 段 落 > く < こ こま で 段落 > と いう タグ を つけ て みる こと に し まし ょ う 。 


く こ こ か ら 大 見 出し > 
か ちか ち 山 
く こ こま で 大 見 出し > 


く < ここ か ら 段 落 > 

昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま ] 
と 呼ば れ て いま し た 。 山田 社 長 に は 、 こ と ある ご と に 「Min-Min の 考え 方 が 大 切な ん で す 」 と 
語り だ す ク セ が あり まし た 。 

く こ こま で 段落 > 


タグ を つけ て みた 状態 


CgAPTEk 2 オリ エン テー ショ ン 








タグ が つい て 、 ペ ー ジ 内 の 2 つの 構成 要素 が 何で ある の か が 明確 に 示さ れ ま し た 。 し か し 、 タ グ が 
つけ られ た テキ スト を 見 て みる と 、 タ グ に 含ま れ て いる 「 こ こ か ら | と 「 こ こま で 」 は 無い 方 が す 
っ きり し て 見 や すい よう な 気 も し ます 。 そ こ で 、「 こ こ か ら 」 は その まま カッ ト し て し まい 、「 こ こ 
まで 」] は 代わ り に 「/」 で あら わす こと に し て 、 次 の よう に 変更 し ます 。 


の 
ゴイ ヨ ユエ dy アロ ) 


く 大 見 出し > 
か ちか ち 山 
く / 大 見 出し > 


く 段 落 > 

昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま ] 
と 呼ば れ て いま し た 。 山田 社長 に は 、 こ と ある ご と に 「Min-Min の 考え 方 が 大 切な ん で す ] と 
語り だ す ク セ が あり まし た 。 

く / 段落 > 


「 こ こ か ら 」 を カッ ト し 、「 こ こま で 」] を 「/] に 変更 する 


> タグ を 英語 に する 


これ で すっ きり と し て 見 や すく な り ま し た 。 し か し 、HTML の タグ は 日 本 語 で は な く 英 語 で 作ら れ 
て いる は ず で す 。 そ こ で 、 タ グ 内 の 日 本 語 部 分 を 英語 に し て み ま し ょ う 。 


まず 、「 見 出し 」 は 「heading] に し ます 。 大 見 出し の 「 大 ] は その まま 「 大 ]「 中 」「 小 ] の よう に 
あら わし て も いい の で す が 、 そ うす る と 見 出し の 種類 が 「 大 見 出し 」「 中 見 出し 」「 小 見 出し ]」 の 3 段 
階 に 限定 され て し まい ます 。 こ こ で は も っ と 多く の 階層 の 見 出し が 表現 で きる よう に 、 大 きい 方 の 
見 出し か ら 順 に 数 字 で あら わす よう に し て み ま し ょ う 。 こ こ で は 、「 大 見 出し 」 は 「heading1] 
と ゆう る と i し ます 。 

次 は 「 段 落 ] で す 。「 段 落 ] は 英語 で は 「paragraphl で す 。 と いう わけ で 、 タ グ の 日 本 語 部 分 を 
英語 に 変更 する と 次 の よう に な り ま す 。 


く heading1> 
か ちか ち 山 
く /heading1> 


く paragraph> 

昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま 」 
と 呼ば れ て いま し た 。 山田 社長 に は 、 こ と ある ご と に 「Min-Min の 考え 方 が 大 切な ん で す 」] と 
語り だ す ク セ が あり まし た 。 

く /paragraph> 


タグ 内 の 日 本 語 を 英語 に 変更 








ぁみ 了 > さら に タグ を 短く する 


や っ と 英語 に は な っ た の で す が 、 一 度 は すっ きり と し て 見 えて いた タグ が 、 英 語 に 変更 し た と た ん 
に 何だ か 少し 見 に くく な っ て し まい まし た 。 本 来 、 タ グ は 印 な の で すか ら 、 ご ちゃ ご ちゃ し た 長い 
単語 で は な く 、 短 く て 記号 の よう に すっ と 目 に 入っ て くる 方 が よさ そう で す 。 そ ん な わけ で 、 こ こ 
は 思い きっ て 単語 の 先頭 の 文字 だ け を 使う よう に 変更 し て み ま し ょ う 。 


<h1> 
か ちか ち 山 
</h1> 


<p> 
昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま 」 
と 呼ば れ て いま し た 。 山田 社長 に は 、 こ と ある ご と に 「WMin-Min の 考え 方 が 大 切な ん で す 」 と 
語り だ す ク セ が あり まし た 。 

</p> 


英 単語 は 短く し て 、 単 語 の 1 文字 目 だ け を 使う こと に する 


と て も すっ きり と し て 、 見 や すく 、 印 らし く な り ま し た 。 そ し て 、 最 初 は 日 本 語 で 仮に つけ て みた 
タグ が 、 こ の 段階 で 見 事 に HTML の タグ に 変身 し て いま す *?。 こ こ で は 、HTML の タグ の 本 来 の 
意味 を 分 か りや すく 示す た め に 少々 まわ りく どい タグ の 付け 方 を し て み ま し た が 、 実 際 に Web ペ 
ー ジ を 制作 する 場合 は 、 テ キス ト に 単純 に く hl2<7h1> や < く pz<7Pp> を 挿入 する だ け で OK で す 。 

※2: これ ら は 、 実 際 に も っ と も 頻繁 に 使用 され る HTML の タグ な の で す が 、 す べ て の タグ が これ ら の よう に 先頭 の 1 文字 だ け を 使 


う 省 略 形 に な っ て いる わけ で は あり ませ ん 。HTML の タグ の 中 に は 、 別 の 省略 方 法 が と られ て いる も の や 、 ま っ た く 首 略 され 
て いな いも の も あり ます 。 


ぁみ > ペー ンジ 全体 の 枠組 み を 作る 


と ころ で 、HTML の タグ の 付け 方 と し て は これ で OK な の で す が 、 こ れ だ け で HTML が 完成 し た わ 
け で は あり ませ ん 。 文法 的 に 正しい HTML フ ァイル に する た め に は 、 こ れ ら の 他 に ペー ジ 全 体 の 
枠 得 み と な る タグ が 必要 な の で す 。 具 体 的 に は 、 次 の よう な も の で す 。 意味 不明 で 少し 複雑 な も 
の に 見 える か も し れ ま せん が 、 今 の 段階 で は これ ら は “決ま り 文 句 ′ の よう な も の だ と 考え て お い 
て くだ さい 。 


sample/chapter-02/lecture-2-2/02.html** 


| 01 <!DOCTYPE htm1> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 
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06 </head> 


| 05 <title> サ ンプ ル </t1tle> 
] 
| 07 < く body> 

| 


| 09 </body> 
| 10 </html> 


全体 の 枠組 み と な る タグ 








※3: 一 般 的 な テキ スト ファ イル の 拡張 子 は 「.txt] で す が 、HTML フ ァイル の 場合 は 「.htmll また は 「.htm] と な り ま す (サー 
バー の 設定 で 変更 する こと も 可能 で す )。 


で は 、 こ の 枠組 み の 中 に 先程 タグ を つけ た テキ スト を 組み 込ん で 、HTML ファ イル と し て 完成 し た 
も の に し て み ま し ょ う 。 最初 に タグ を つけ た テキ スト 全体 を 選択 し て コピ ー し 、 ペ ー ジ 全体 の 枠組 
み の 1 行 あい て いる と ころ (<body> と </body> の 間 ) に ペー スト し て くだ さい 。 


sample/chapter-02/lecture-2-2/03.html 


01 <!DOCTYPE html> 

02 <html> | 

03 < く head> | 

| 04 <meta charset="utf-8"> 

| 05 <title> サ ンプ ブル </tit]e> 

06 </head> 

07 <body> 

08 <h1> 

09 か ちか ち 山 

| 10 </h1> 

11 <p> 

12 昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま 」 と 呼ば れ て い | 
まし た 。 山 田 社長 に は 、 こ と ある ご と に 「Min-Min の 考え 方 が 大 切な ん で す 」 と 語り だ す ク セ が あり まし た 。 

| 13 </p> 

| 14 </body> 

15 </htm1> 


タグ を つけ た テキ スト を 、 ペ ー ジ 全体 の 枠組 み の 中 に 組み 込む 。 








これ で 文法 的 に も まっ た く 問 題 の な 完璧 な HTML ファ イル が 完成 し まし た 。HTML ファ イル を 作 
る と いう こと は 、 こ の よう に テキ スト の 各部 分 に <h1><7h1> や く p> く 7DP> の よう な タグ を つけ て 
いく 作業 が 中 心 と な り ま す 。 

つま り 、HTML 側 で どの よう な タグ が 用 意 さ れ て いる の か を ざっ と 覚え て お き 、 テ キス ト を 見 て そ 
こ に ふさ わし い タ グ を つけ られ る よう に な れ ば OK な の で す 。 誰 に で も で きる 簡単 な 作業 で す の で 、 
安心 し て どん どん 進め て いき まし ょ う 。 


62 て 





『 イ 
3 エ dy ロ う 








CSS を 使っ て みよ う ! 


次 は CSS を 使っ て み ま し ょ う 。HTML で タグ 付け を し た 部 分 に 、 表 示 の 指定 を し て み ま す 。 


> CSS フ ァイル を 読み 込ま せる 





さて 、 文法 的 に 正しい HTML ファ イル は 完成 - 
し まし た が 、 表 示方 法 は まだ 一 切 指定 し て い を っ の @ 作 の 人 議 
ませ ん 。 こ の 段階 で HTML を 表示 させ る と ど 

0 か ちか ち 山 
の よう に な る の か を 確認 し て み ま し ょ う 。 
Lecture 2-2 で 完成 させ た ファ イル (sample/ 苦 々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 


人 間 の あい だ で は 「 や ま 」 と 呼ば れ て いま し た 。 山 田 社 長 に は 、 こ と 
chapter-02/lecture-2-2/03.htm) を ブラ ウ ある ご と に 「Win-Win の 考え 方 が 大 切な ん で す 」 と 語り だ す クセ が あ 

















り ま し た 。 
ザ で 開い て くだ さい 。 ほ ぼ 右 の よう に 表示 さ 
れる は ず で す ( ブ ラウ ザ の 設定 に よっ て 表示 
結果 は 異な り ま す )。 表示 指定 を し て いな い 状 態 で の HTML の 表示 


で は 、 さ っ そく これ に CSS を 適用 し て み ま し ょ う 。「lecture-2-3] フォ ル ダ の 中 に は 、 す で に CSS 
を 書き 込ん だ ファ イル 「style.css] を 用 意 し て あり ます の で 、HTML の 中 に 「style.css] を 読 
み 込 む 指 定 を 追加 し ます 。CSS フ ァイル を 読み 送 ま 攻 る に は 、 以 下 の よ うな 指定 を 追加 し て くだ 
さい 。 


sample/chapter-02/lecture-2-3/index.html 

| 01 <!DOCTYPE html> 

| 02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> サ ンプ ル </title> 

06 <]ink re]="stylesheet" href="style.css"> - ま ーーーーー この 行 を 追加 

07 </head> 

08 <body> 

09 <h1> 

10 か ちか ち 山 

11 </h1> 

12 <p> 

13 昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま 」 と 呼ば れ て い 
まし た 。 山田 社長 に は 、 こ と ある ご と に 「WMin-Min の 考え 方 が 大 切な ん で す ] と 語り だ す ク セ が あり まし た 。 

14 </p> 


CaAPTE ょ 2 オリ エン テー ショ ン 





| 15 </body> 
| 16 </htm1> 





CSS ファ イル [style.css」 を 読み 込む 指定 を 追加 


「lecture-2-3] フォ ル ダ 内 の 「index.html| は 、 
CSS を 読み 込む 指定 を すでに 追加 し て あり 
ます の で 、 そ れ を ブラ ウザ で 表示 させ て み ま 
し ょ う 。 

右 の よう に 表示 され る は ず で す ( 表 示 結 果 は 


OS の 種類 や その バー ジョ ン に よっ て 多少 の 


違い が あり ます )。 


CSS ファ イル を 読み 込ま せ た あ と の 表示 結果 


みゆ 読み 込ま せ た CSS の 内 容 を 確認 する 





表示 結果 が が ら り と 変化 し まし た 。 続 け て 、 具 体 的 に どの よう な CSS を 指定 すれ ば この よう な 表 


示 に な る の か を 確認 し て み ま し ょ う 。 


テキ スト エディ タ で 、「lecture-2-3] フォ ル ダ 内 の 「style.css] を 開い て くだ さい 。 


で は 、 ざ っ くり と で す が 、 こ の 指定 内 容 を 
説明 し ます 。 赤 で 示し た 部 分 は 、 そ れ ぞ れ 
何 に 対す る 表示 指定 で ある の か を 示し て い 
ます 。 

先頭 に ある body と いう の は 、HTML の 枠 
組み の 中 に あっ た <body> と </body> の 
範囲 の こと で 、 ひ と こと で 言え ば ペー ジ 全 
体 を 意味 し ます 。h1 は も ちろ ん <h1> と 
く </h1> で 囲っ た 天 見 出し の こと で 、p は 
く <p> と く /p> で 囲っ た 段落 の こと で す 。 
つま り 、body { ] の 中 に 書か れ て いる の は 
ペー ジ 全 体 に 対す る 表示 指定 、h1 { } の 中 
に 書か れ て いる の は 大 見 出し の 表示 指定 、 


※4: CSS フ ァイル の 拡張 子 は 「.css] で す ( サ ー バ ー の 
設定 で 変更 可能 で す )。 


sample/chapter-02/lecture-2-3/style.css** 


| 


01 body { 


02 


03 


5 省 』 


margin: 60Ppx: 
font-family: serif: 
background: steelblue: 


hl { 


} 


color: white: 
font-size: 24Dx: 
text-shadow: 1px 1px 2px black: 


p 【 


] 


color: white: 

font-size: 18px: 

text-shadow: 1px 1px 2px black: 
]ine-height: 1.8: 





「style.css] に 書か れ て いる 全 内 容 











は 
> 
る 
3 
上 











o2@ 


P { } 中 に 書か れ て いる の は 段落 の 表示 指定 、 と いう こと で す 。 シ ンプ ル で 分 か りや すい 書式 で す 。 
表示 指定 も シン プル で 、 た と えば 「co1or: white:| は 文字 色 を 白 に する 指定 で す 。 つ まり 、「 〇 




















6 s : | の 書式 で 「 何 を どう ずる mj] と いっ た パタ ー ン で 指定 すれ ば よい の で す 。 文 








字 色 を 赤 に し た けれ ば 「color: red:] で OK で す 。 


表示 指定 の 「 何 を ] の 部 分 を 見 る と お お よそ の 予測 が で きる か と 思い ます が 、body に 対す る 指定 
の margin は マー ジン 、fQnt=family は フォ ント の 種類 、background は 背景 の 指定 と な り ま す 。 
h1 と p に 指定 され て いる fGnt=sTze は フォ ント サイ ズ 、teXtssShadow は 文字 に つけ る 影 、 


1ine=hefght は 行間 で す 。 


> CSS を 書き 換え て みる 


CSS が どの よう な も の で ある の か 、 お お ま 
か な イメ ー ジ が つか め た と 思い ます の で 、 
「style.css] に 書か れ て いる 内 容 を 少し 書き 
換え て みて 、 表 示 が どの よう に 変化 する の か 
を 見 て み ま し ょ う 。 

まず は ペー ジ 全 体 の 背景 色 を 変え て み ま し ょ 
う 。 現在 は 「stee1blue] と いう 色 に な っ 
て いま す が 、 こ れ を 「orange」 に 書き 換え 
て 上 書き 保存 し ます 。 


「index.html| を ブラ ウザ で 再 表 示さ せる と 、 
ペー ジ 全 体 の 背景 色 が オレ ンジ 色 に 変わ っ 
て いま す 。 


CgAPrE+ 2 オリ エン テー ショ ン 


09 
10 
11 
| 1z 
13 
| 14 
15 
| 16 
| 17 
| 18 


body { 


| 


h1 { 


) 
ペー ジ 全 体 の 背景 色 を 変更 する 


margin: 60Px: | 
font-family: ser1f: 
background: orande: 

人 | 

| 


steelblue を orange に 変更 


color: white: 
font-s1ize: 24Pxi 
text-shadow: 1px 1px 2px black: 


{ 

color: white: 

font-size: 18px: 

text-shadow: 1pX 1px 2px black: 
1ine-height: 1.8: | 








ペー ジ 全 体 の 背景 色 が オレ ンジ 色 に な っ た 





次 は 天 見 出し の フォ ント サイ ズ を 変更 し ま 
す 。 現 時点 で は 「24px]、 つ まり 24 ピ クセ 
ル に な っ て いま す の で 、 こ れ を 「50px」 に 
変更 し ます 。 ピ クセ ル 単 位 で ある こと を 示す 
「px」 の 部 分 は その まま に し て 、 数 字 だ け を 
24 か ら 50 に 変更 すれ ば OK で す 。 こ の と き 、 
数 字 と px の あい だ に スペ ー ス を 入れ な いよ 
うに し て くだ さい 。 書 き 換え が 終了 し た ら 、 
上 書き 保存 し ます 。 


「index.html| を ブラ ウザ で 再 表示 させ る と 、 
大 見 出し の フォ ント サイ ズ が 50 ピ クセ ル に 
変わ っ て いま す 。 


次 に 、 大 見 出し と 段落 内 の テキ スト に つけ ら 
れ て いる 大 キス ド の 影 を 消し て み ま し ょ う 。 
そう する に は 、 右 の よう に text-shadow 
で は じ ま る 行 を 削除 する だ け で OK で す 。 削 
除 し た ら 、 上 書き 保存 し て くだ さい 。 








01 body { 

02 margin: 60PxX: 
| 03 font-family: serif: 
| 04 background: orange: 
| 


07 h1 { 

08 color: white: 

09 font-s1ize: 50pxi - 式 一 24px を 50px に 変 
text-shadow: 1px 1px 2px black: 


1DE 
14 color: white: 
font-size: 18Dx: 
16 text-shadow: 1px 1px 2px black: 
1ine-height: 1.8: 
18 } 


HLT の フォ ント サイ ズ を 変更 する 


更 


< 
> 
の 
同 
由 








の 2 ル /j2 昨 


大 見 出し の 文字 サイ ズ が 大 きく な っ た 








| 01 body { 

| 02 margin: 60px: 

03 font-family: serif: 

04 background: orange: 

| 05 } 

| 06 

07 h1 { 

08 color: white: 

09 font-size: 50Ppx: 

| 10 text-shadow: 1Dpx 

IE 3 

12 

13 pt 

14 color: white: 

| 15 font-size: 18px: 
16 text-shadow: 1px 1px 2px black: 
17 ]ine-height: 1.8: 
18 + 


この 行 を 削除 する 


1px 2px black: 





この 行 を 削除 する 








h1 と p の 文字 に 影 を つけ る 指定 を 行 ご と 削除 する 


o29 





「index.html] を ブラ ウザ で 再 表示 させ る と 、 
大 見 出し と 段落 内 の テキ スト に つけ られ て い 
た 影 が 消え て いま す 。 


最後 に 、 段 落 内 の テキ スト の 行間 を 変更 し て 
み ま し ょ う 。 現 時点 で は 「1 .8]、 つ まり フ 
ォ ン ト サ イ ズ の 1.8 倍 に 設定 され て いま す の 
で 、 こ こ で は それ を 1.0 倍 に 変更 し て み ま す 。 
「1 .8] を 「1.0」 に 書き 換え て 上 書き 保存 
し て くだ さい 。 


[index.html| を ブラ ウザ で 再 表示 させ る と 、 
段落 内 の 行間 が 狭く な っ て いま す 。 


た い へ ん 簡単 な サン プル で は あり まし た が 、 
実際 に テキ スト に タグ を つけ て HTML に し 、 
それ に CSS を 適用 し て 表示 方 法 も 少し 変更 
し て み ま し た 。 こ れ で HTML と CSS の イメ 
ー ジ は 掴む こと が で きた の で は な いか と 思い 
ます 。 あ と は 細か いこ と を 少し ずつ 覚え て い 
け ば いい だ け で す 。 楽 し みな が ら ど ん どん 進 
め て いき まし ょ う ! 


と いい つつ 、 次 の Chapter 3 の タイ トル を 見 る と 「 文 法 的 な カタ い 話 ] と な っ て いま す ( 書 き 方 の 
基本 的 な ルー ル や 専門 用 語 な ど を 学習 し ます )。 退 屈 で ちょ っ と 眠たく な る か も し れ な い 内 容 で す 
が 、HTML と CSS を きち ん と 覚え る に は 避け て 通る こと の で き な い 重要 な 部 分 で す の で 、 こ こ だ 


け は ちょ っ と 頑張 っ て 覚え て くだ さい 。 


テキ スト の 影 が 消え た 











01 body { 


02 
1 
04 
05 } 
06 


3 


08 
| 09 
10 } 
性 


margin: 60Px: 
font-family: serifi 
background: orangei 


07 h1 { 


color: white: 
font-size: 50Dpxi 


12 pt 


13 
14 
| 15 


DU6 


color: white: 
font-size: 18Dx: 
1ine-height: 1.0: < 一 1.8 を 1.0 に 変更 





p の 行間 を 変更 する 


段落 の 行間 が 狭く な っ た 














し gp ナム に 


これ か ら HTML の タグ と 


CSS の 表示 指 写 を 少 
いき ます が 、 そ の 前 に 


Chapter 4 以降 を 
くに は どう ぅ TPA 
し っ か り と 集え て くだ さい 。 








HTML の タグ を 正しく つけ る 意味 


テキ スト を どの よう に タグ 付け する か は 、 実 は と て も 大 切な こと で す 。 
「 正 し く 」 タグ 付け する こと に どん な メリ ッ ト が ある の か 、 知 っ て お きま し ょ う 。 


pk CSS を 独立 させ る メリ ッ ト 


か つて の Web ペ ー ジ は 、 ワ ー プ ロ と 同様 の 感覚 で 、 ど う 表 示さ せる か と いう こと だ け を 考え て 制 
作 さ れ て いま し た 。 し か も 、CSS は 一 切 使わ ず に 、HTML の 表 を 作る 機能 を 利用 し て 、HTML だ 
け で 作ら れ て いた の で す ( い わ ゆ る テー ブル レイ アウ ト と いう 制作 手法 で す )。 


し か し 、 そ れ で は 当然 の よう に 無理 が 生じ ます 。HTML で 表示 指定 を 行う と 、 ペ ー ジ 内 の 各部 分 ご 
と に 表示 指定 を 埋め 込ん で いく こと に な り ま す の で 、HTML ファ イル の 容量 は か な り 大 き な も の と 
な り ま す 。 そ し て 、 表 示 指定 が その 場所 ご と に 埋め 込ま れ て いる と いう こと は 、 た と えば 100 ペ ー 
ジ あ る サイ ト の 表示 を 変更 し よう と 思っ た ら 、100 ペ ー ジ すべ て を 修正 する 必要 が ある こと に も な 
り ま す 。 ま た 、 表 示 指 定 は その 埋め 込ま れ た も の で 固定 と な り 、 パ ソコ ン の 画面 で 閲覧 する こと に 
し か 対応 し て いな い ペ ー ジ に な っ て し まい ます 。 つ まり 、 容 量 が ムダ ダ に 大 きく で 、 変更 に 大 き な 手 
間 が か か り 、 閲覧 環境 を 制限 じ で じ ま う 融通 の きか な い ペ ー ジ に な っ て し まう と いう こと で す 。 





それ ぞ れ の HTML ファ イル 内 に 表示 指定 が 組み 込ま れ て いる 場合 


本 g| っ ] 
| HTML | HTML 。 」 HTML | | HTML HTML 
| |] | 1 














HTML で 表示 指定 を 行っ た 場合 、100 ペ ー ジ の 表示 変更 を する な ら 、100 ペ ー ジ すべ て を 修正 す 
る 必要 が ある 


そこ で 、 徐 々 に で は あり まし た が 、 表 示 指 定 に CSS が 利用 され る よう に な っ て きま し た 。 表 示 指 
定 を HTML か ら 取 り 除 き 、 独 立 し た CSS フ ァイル に し て 、 そ れ を 各 HTML か ら 読 み 込ま せる 方 式 
に 変更 し た の で す 。 こ れ に よっ て 、HTML フ ァイル の 容量 は 劇 的 に 少な ぐ な り 、100 ペー ジ の 表示 
変更 も HTML に 手 を 加え る こと な く CSS を 修正 する だ け で 済む よう に な り ま し た 。 ま た 、 た と え 








ば 印刷 用 の 表示 指定 を 別途 用 意 し た り 、 画 面 サ イズ 別 の レイ アウ ト を 用 意 し た りす る こと も 可能 に 
な り ま し た 。 





い IN [へ 
HTML HTML HTML 





表示 指定 は CSS ファ イル 内 に 書き 、 各 HTML は それ を 読み 込ん で いる 場合 


HTML | ・*・ 





へ へ 
HTML 


> 
る 
3 
“ 











と ぁみ HTML の タグ 付け を 正しく する メリ ッ ト 


し か し 、CSS に は 大 変 分 か りや すい 大 
き な メ リッ ト が あっ た た め に 使わ れる 
よう に な っ て は きた も の の 、HTML の 
タグ に 関し て は あま り 注 意 を 払わ ず に 
作る 人 が 多く いま し た 。 具体 的 に 言う 
と 、 ペ ー ジ 内 の 多く の 部 分 に 対し て 
<div> 一 </div> と いう タグ ば か り 
を つけ て し まう と いう 制作 方 法 で す 。 
これ は つま り 、HTML を 「 ペ ー ジ 内 の 
構成 要素 と し て 何で ある か を 示す 印 ] 
と し て 使う の で は な く 、「 単 純 に 範囲 
だ け を 示す 印 」 と し て 使っ て いる こと 
に な り ま す 。 そ れ で も CSS を 使用 する 
メリ ッ ト の 多く は 得 ら れ ま す が 、 そ れ 
で は Web ペー ジ が 本 来 持っ て いる ポテ 
ン シ ャ ル の 一 部 し か 発揮 で き な い ペー 
ジ に な っ て し まい ます 。 


01 <d1v id="h001" class="heading"> | 
902 OOOOO 

03 </div> 

04 <div class="honbun"> | 
905 OOOOOOOOOOOOOOOOOOOO | 
05 </div> 

07 <div class="honbun 1ast"> 

08 OOOOOOOOOOOOOOOOOOQO 
09 </div> 

10 <div id="h002" class="heading"> 

11 OOOOO 

12 < く /div> 

13 <div class="honbun"> 

14 OOOOOOOOOOOOOOOOOOOO 
15 </d1iv> 

16 <div class="honbun 1ast"> 

17 OOOOOOOOOOOOOOOOOOOO 
18 </div> 


適当 に な ん で も 同じ タグ を 使っ て 男 囲 だ け 示し て し まう と 、 そ れ ら を 区 
別 する た め に 余分 な 属性 ( 赤 で 示し た 部 分 ) を つけ る 必要 が 生じ る 。 ま た 
範囲 は 分 か る が 、 そ れ ら が 何で ある の か は 分 か り に くい 





05 き 
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まず 、 な ん で も か ん で も 同じ タグ を つけ て し まう と 、 そ れ ら を 区 別 す る た め に 後述 する 「 属 性 ] と 
いう も の を 別途 追加 する 必要 が 出 て きま す 。 見 出し に 対し て 見 出し の タグ 、 本 文 の 段落 に 対し て 
段落 の タグ 、 と いう よう に 当たり 前 に タグ が つい て いれ ば その まま シン プル に 表示 指定 で きる も の 
が 、 分 か り に くく な り 逆 に 複雑 化す る こと に な る わけ で す 。 も ちろ ん 、 余 分 な も の を 追加 する 分 、 
ファ イル の 容量 も 増え ます 。 


みゆ ァ 正しい HTML は 万 能 デ ー タ 


さら に 、 ペ ー ジ 内 の どの 部 分 に も 同じ タグ が つけ られ て いる と 、 多 種 多 様 な 機器 (今後 新しく 出現 
する で あろ う 未 知 の 機器 も 含む お ) で 利用 する こと が 難し く な っ て し まい ます 。 た と えば 、 ペ ー ジ の 
内 容 を 音声 で 読み 上 げ る 場合 を 考え て みて くだ さい 。 ど の 部 分 に も 同じ タグ し か つい て いな けれ ば 、 
タグ は 何かしら の 範囲 を 示し て いる と いう こと が 分 か る だ け で 、 あ っ て も ほとん ど 意 味 が あり ませ 
ん 。 そ れ で は 、 タ グ の な い 単純 な テキ スト ファ イル と 同じ よう な も の で す 。 


し か し 、 も し 見 出し に 対し て 見 出し の タグ 、 本 文 の 段落 に 対し て 段落 の タグ 、 と いう よう に 適切 に 
た と えば 、Web ペー ジ の 内 容 を 音 
声 で 読み 上 げ さ せる 場合 に は 、 見 出し の 前 で 特定 の 音 を 鳴ら し て それ が 見 出し で ある こと を 伝え た 
り 、 見 出し と 段落 を 別 の 音声 で 読み 上 げ さ せる こと で 区 別 す る こと も 可能 に な り ま す 。 ま た 、 単 純 
に 一 定 サ イズ の テキ スト し か 出力 で き な い よう な 機器 ブラ ウザ で あっ て も 、 見 出し は 中 央 揃え 、 
本 文 は 左 揃え ん 、 と いっ た よう に し て それ ら を 区 別 で きま す 。 つ まり 、 正 し く 適切 に タグ が 付け られ 
て いれ ば 、 一 般 的 な ブラ ウザ と は まっ た く 異 な る 環境 で も 利用 で きる “万能 デー タ " に な る と いう 
こと で す 。 そ し て 、 そ れこ そ が Web ペ ー ジ の 持つ 最大 の 能力 で あり 特徴 で も ある の で す 。 





01 <h1> ーー 5 
| 表示 指定 の 通り に 再現 で き な く て も 、 環 境 に 
02 OOOCO cg 円 = 
0 応じ て 見 出し らし く 表 現 可能 
く P> 
5 OOOOOOOOOOOOOOOOOOOO 
06 </p> 






表示 指定 の 通り に 再現 で き な く て も 、 環 境 に 
7 <p> 応じ て 段落 らし く 表現 可能 
08 OOOOOOOOOOOOOOOOOOCO 


09 </p> 
ロ Ooooo 表示 指定 の 通り に 再現 で き な く て も 、 環 境 に 
12 </h1> 応じ て 見 出し らし く 表現 可能 








13 <p> 

14 の OOOOOOOOOOOOOOOOOOOO 

15 </D> 表示 指定 の 通り に 再現 で き な く て も 、 環 境 に 

16 <P> 応じ て 段落 らし く 表 現 可能 | 





| 17 OOOOOOOOOOOOOOOOOOOO 
18 </p> 


適切 に タグ が つけ られ て いれ ば 、 環 境 に 合わ せ た 表 現 で 出力 可能 な 万能 デ ー タ "と な る 


LnAPTEF < 文法 的 な カタ い 話 








HTML の 基礎 知識 


HTML の タグ 付け で 使っ た パー ツ は 、 名 前 や 書き 方 が 決ま っ て いま す 。 また 特殊 な 書き 方 を 
する 場合 も あり ます の で 、 覚 えて お きま し ょ う 。 


エ 
> 
ゃ 
ュ 
m 
* 





ぁ と > HTML の 専門 用 語 


これ か ら HTML の 説明 を し て いく に あたっ て 、 そ の 説明 が 何 を 指し て いる の か が ハッ キリ と 分 か る 
よう に する た め に 、 ま ず は HTML で 使わ れる 用 語 か ら 覚え て いき まし ょ う 。 


以下 は 、Chapter 2 で テキ スト に タグ を つけ た と き の ソ ー ス コー ド の 一 部 (大 見 出し と し て タグ を 
つけ た 部 分 ) で す 。 





SN2 間 還 還 開始 タグ 
要素 一 -] が ちか ち 山 キーー ーー 要 系 内 容 
</h1> ーーーーーーーー 終了 タグ 








テキ スト に HTML の タグ を つけ た と き の 各 部 分 の 名 称 


タグ は テキ スト の 特定 の 範囲 の 前 後に つけ ます が 、 前 の タグ を 開始 タタ グ 、 後 ろ の タグ を 終了 タグ と 
言い ます 。 こ の と き 、 開 始 タグ と 終了 タグ の 間 に は さま れ て いる テキ スト は 要素 内 容 、 ま た は 単に 
肉 容 と 呼び ます 。 

そし て 、 開 始 タグ か ら 終 了 タ グ ま で を 含む 全体 を 要素 と 言い ます (Web ペ ー ジ の 構成 要素 と いう 意 
味 で す )。 こ の 要素 と いう 言葉 は 、「<h1> </h1>] で あれ ば h1 要 素 、「<p> </p>」 で あれ ば 
p 要素 と いう よう に 使わ れ ま す 。h1 や p の 部 分 だ け を 指し 示す 場合 は 要素 名 と 言い ます 。 
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と 属性 と は ? 


要素 に は 、 そ の 要素 の 特性 や 状態 な ど 
を 示す た め に 属性 を 指定 する こと も で 
きま す 。 属 性 は 「 〇 〇 〇 =" 2 
また は 「 〇 〇 〇 =' HH "」 の 書式 で 、 
開始 タグ の 要素 名 の 直後 に 半角 スペ ー 
ス で 区 切っ て 書き 入れ ます 。 
属性 に は 、 そ の 要素 に 固有 の も の 、 ど 
の 要素 に も 共通 し て 指定 で きる も の な 
ど が あり 、 半 角 ス ペー ス で 区 切っ て 必 
要 な 数 だ け 順 不同 で 指定 で きま す 。 















































属性 


く h1 1d="pagetitle"> 
か ちか ゆ 山 


属性 名 く /h1> 属性 値 











属性 は 「 属 性 名 =" 属性 値 "] の 書式 で 指定 する (「"」 の 代わ り と し て 「'」 
も 使用 可能 )。「 属 性 値 ] は 、 単 に 「 値 ] と 呼ば れる 場合 も ある 








03 </h1> 


| 01 <h1 id="pagetitle" class="blog" 1ang="ja"> 





2 かち かち 山 
03 </h1> 


| 
5 か ちか ち 山 
] 
| 





01 <h1 1ang="Ja" class="blog" 1d="pagetitle"> 








属性 は 順不同 で いく つ で も 指定 で きる 。 


上 の 2 つの ソー スコ ー ド は 属性 の 指定 順序 が 異な る が 、 意 味 的 に も 表示 結果 に も 違い は な い 


と 半角 スペ ー ス ・ 改 行 ・ タ ブフ の 表示 


ソー スコ ー ド 上 で タグ の 直前 また は 直 
後に 入れ た 半角 スペ ー ス ・ 改 行 ・ タ ブ 
は 、 ブ ラウ ザ で の 表示 に 影響 を 与え ま 
世 ん みん 。 た と え そ れ ら が 複数 連続 で 入っ 
て いた と し て も 、 そ れ ら が 無い か の よ 
うに 表示 され ます 。 

た と えば 、 右 の ソー スコ ー ド の 表示 結 
果 は どれ も 同じ に な り ま す ( つ まり 、 ど 
の 書き 方 を し て も OK で す )。 
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| 01 <h1> か ちか ち 山 く /h1> 
01 <h1> 訪 
02 か ちか ち 山 ご 
03 </h1> 
| o 志和 ジ メ ー| 
1 こ か ち が ち 山 放 
03 く </h1> 

















タグ の 直前 また は 直後 に 半角 スペ ー ス ・ 改 行 ・ タ ブ を 入れ て も 、 表 示 に は 
影響 し な い 








また 、 開 始 タ グ と 終了 タグ の 間 、 つ まり 要素 の 内 容 と し て 入れ た テキ スト 内 部 の 改行 や ヤ タ ブ は 、 ブ 
ラウ ザ で 表示 され る と き に は 1 つの 半角 スペ ー ス に 置き 換わり ます 。 
要素 内 容 と し て 入れ た テキ スト の 途中 で 改行 させ た い 場 合 に は 、Chapter 5 で 登場 する 改行 用 の 娘 


グ が 別途 必要 と な る 点 に 注意 し て くだ さい 。 





また 、 半 角 ス ペー スズ ・ 改 行 ・ タ ブ の うち いずれ か gi <h1>Min Min Yama</h1> 


を 連続 し て 入れ た 場合 は 、 そ れ ら は まとめ て 羊 02 


導 主 多 曲 史 に な っ て 表示 され ます (これ は 単 | ーーー や 当 


語 を 半角 スペ ー ス で 区 切っ て 表示 する 英語 の よ 05 wing | 

うな 言語 の テキ スト を 適切 に 表示 する た めで | ーーー | 
本 EE | 

す )。 は じ め の h1 要 素 の 内 容 は 単純 に 半角 スペ ー ス 1 つ で 区 切っ て 
あり 、2 つ 目 の h1 要素 は 単語 間 に 改 行 と 8 つの 半角 スペ ー ス 
を 入れ て ある 








を っ CO 人 





Win Win Yama 


Win Win Yama 








上 の ソー スコ ー ド を HTML の 枠組 み の 中 に 入れ て ブラ ウザ で 
表示 させ た と ころ 。 改 行 と それ に 続く 8 つの 半角 スペ ー ス は 、 
1 つの 半角 スペ ー ス に 置き 換え られ て いる 


ぁみ 特別 な 書き 方 が 必要 と な る 文字 


HTML の ソー スコ ー ド の 中 に 半角 の 「<] また は 「>] を 記入 する と 、 タ グ の 一 部 だ と 認識 され ます 。 
その た め 、 文 字 と し て 「<] また は 「>」 を 表示 させ た い 場 合 に は 、 表 の よう な 特別 な 書き 方 を す 
る 必要 が あり ます 。 な お 、 こ の 書き 方 を する 場合 は 、 同 じ ア ルフ ァ ベ ッ ト で も 小文字 と 大 文字 は 別 
の 文字 と し て 扱わ れ ま す の で 、 必 ず こ の 表 
の 通り に 小文字 で 書い て くだ さい 。 






ソー スコ ー ド 上 の 書き 方 | ブラ ウザ で の 表示 
lt: 
| &ot: |> | 
半角 の 「<] また は 「>」 を 表示 させ た い 場合 に は 、 こ の よう に 書く 








この よう に 、HTML に お いて 特別 な 役割 持っ て いた り 、 キ ー ボ ー ド か ら 直 接 入 力 で き な い よう な 
特殊 な 文字 を 示す に は 、 &OO 〇 : と いう 書式 を 使い ます 。 ち な み に 、「<] を 示す た め に 使わ れ て 











os@ 


いる 「]t] は 「lessithan (より 小さ い )」 の 略 で 、 同 様 に 「gt] は 「greaterthan (より 大 きい )」 
の 略 で す 。 


& 〇 OO 〇 : と いう 書式 が 特別 な 意味 を 持っ て いる た め 、「<]「>] と 同様 に 半角 の 「&] を 表示 させ た 
い 場 合 に も 特別 な 書き 方 を する 必要 が あり ます 。 ま た 、 属 性 は 「 属 性 名 =" 属性 値 "] の 書式 で 書 
き 込み ます が 、 属 性 値 の 中 に 「 中 を 書き 


マー ー ド 上 の 。 の 表示 
込む と そこ で 属性 値 が 終了 し た と 見 な され トル 2 の 


て し まい ます 。 そこ で 、 必 性 値 の 中 に も 「"] ai: |* 


を 入れ られ る よう に 、 こ れ に も 特別 な 書き 。 半角 の [&j を 表示 させ た い 場 合 や 、 半 角 の 「"] を 属性 仁 の 中 で 
方 が 用 意 さ れ て いま す 。 使用 し た い 場合 に は 、 こ の よう に 書く 











ここ で 紹介 し た &O 〇 〇 : と いう 書式 で 入力 で きる 文字 は 、 こ の ほか に も た くさ ん あり ます 。 入力 
可能 な すべ て の 文字 の 一 覧 は 仕様 書 に あり ます の で 、 必 要 に な っ た 場合 に は 以下 の ペー ジ で 確認 
し て くだ さい 。 









設 8.$ Named character refere。 ※ 
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8.5 Named character references 





ドコ 
に 
fa This table lists tne character reference names that are supported by HTML. and the code 
ど | points to which they refer. It is referenced by the previous SectiOnS. 
マ 
加 Name Characterts) Glyph hypheni urOzO1O 
回 記 < 
に Am = | ozo63 | 
テ Ao ^ ms 0 
Aerove | weomez 1x に 2 
Arc | uooez |x 4 Oo0495 ie | 
1 
Ai | weo% | 
An | uipsoz |g に) | ゅ 2004 |* | 
CZ ^ 先 回 | 
Apms: | weossm |]x FC L | 
2 % B P | 
ce ーー 0 
= | esesp il 
ーー] ロ | 
Zst 思 に | 
eoyrcaoo ニー | 
ng | woeoecs 1A 関 | oooss ls | 
Ao | unpee |g ー つ ! 
erg = ーー 
2meei A ーー 
ww csseez 14 megeers 
ES | sezze 1 Ei 
4 | roz |・ Pet し 
ET | uozsoe 1: ビー に 人 
ご ょ 』 
Boy: Ux+00411 5 レン 上 ノ 








ほか に 使用 で きる 書き 方 は HTML5 の 仕様 書 に 掲載 され て いる 
(http://www.w3.org/TR/html5/named-character-references.html) 
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ぁみ コメ ント の 書き 方 


HTML の ソー スコ ー ド の 中 に は 、 表 示 に 影響 する こと の な い コ メン トド (注釈 や メモ の よう な も の ) を 
書き 込ん で お く こ と が で きま す 。HTML で は 、 下 の よう に く 呈 = と =-> で 囲っ た 範囲 が コメ ント 
どなり ます 。 








01 く !-- コ メン トニ > 














01 < く !-- 
02 コメ ント 
03 --> 














コメ ント の 書き 方 。 く ! - - と --> で 囲 わ れ た 範囲 が コメ ント と な る 


た と えば 、 ソ ー ス コー ド 上 で 開始 タグ と 終了 タグ が 極端 に 離れ て いる よう な 場合 に 、 終 了 タ グ の 直 
後に コメ ント を 入れ て 対応 する 開始 タグ が どれ な の か が 分 か る よう に し て お く 、 と いっ た 使い 方 を 
し ます 。 


く ! - - と --> の 中 に は 自由 に テキ スト を 書き 込ん で お く こ と が で きま す が 、 複 数 の ハイ フン (-) を 
連続 し て 入れ る と 、 そ こ で コメ ント の 内 容 が 終了 し て いる と 見 な され ます の で 注意 し て くだ さい ( コ 
メン ト の 途中 に - - が 入っ て いる と 、 ブ ラウ ザ に よっ て は 表示 に 影響 が 出る 場合 も あり ます )。 








コメ ント の 書き 方 の 悪い 例 。 連 続 し た 複数 の ハイ フン を 入れ て は いけ な い 
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ふさ 


HTML の バー ジョ ン に つい て 


HTML の バー ジョ ン に つい て 説明 し ます 。 本 書 で 解説 し て いく 「HTML5] が どう いう 経緯 で 
登場 し て きた の か 、 以 前 の バー ジョ ン と どう 違 う の か を 簡潔 に まとめ て み ま し た 。 


ぁ pHTML4.01 と XHTML1.0 


と ころ で 、HTML に は いく つか の バー ジョ ン と 種類 が あっ て 、 そ れ ぞ れ で 使用 で きる 要素 や 属性 、 
細か い 部 分 で の 書き 方 の ルー ル な ど が 異な り ま す 。 現在 、 一 般 的 に 利用 され て いる HTML に は 、 
次 の よう な も の が あり ます 。 


バー ジョ ン 種類 | 説明 
| Strict 正規 の HTML4.01 
. HTML4.01 8 | 志 
| (1999 年 に 完成 ・ 公 開 ) Transitional ] 文法 的 に あま い HTML4.01 
| Frameset フレ ー ム 機能 が 使え る HTML4.01 
| Strict 正規 の XHTML1.0 
「XHTML1.0 5 た ここ と 
| (2000 年 に 完成 ・ 公 開 ) | Transitional ] 文法 的 に あま い XHTML1.0 
_ |Frameset フレ ー ム 機能 が 使え る XHTML1.0 
| HTML5 (2012 年 現在 は 草案 ) な し 現在 策定 中 の HTML の 最新 版 


一 般 的 に 利用 され て いる HTML の 種類 


HTML4.01 は 、 現 時 点 で 仕様 が 確定 し て いる HTML の 最新 版 で す 。 こ れ は SGML と いう 国際 標準 
規格 に よっ て 作ら れ た も の で す が 、 そ れ を Web 向 け の 新しい 規格 で ある XML で 定義 し 直し た も の 
が XHTMM1IiO0 で す 。 し た が っ て 、 細 か い 部 分 で の 書き 方 が 違う だ け で 、 使 える 要素 と 属性 は 
HTML4.01 と 同じ で す 。 現 時点 で は 、 お そら く XHTML1.0 に よっ て 作ら れ て いる Web ペ ー ジ が も 
っ と も 多い の で は な いか と 思わ れ ま す 。 


HTML4.01 と XHTML1.0 は 、 さ ら に 「Strictl「Transitionall Frameset] と いう 3 種類 に 分 か れ て 
いま す 。HTML4.01 と XHTML1.0 の 本 来 の 仕様 は 「Strictl で す 。 し か し 、HTML4.01 の 仕様 が 完 
成 し た 1999 年 頃 は 、 ま だ CSS が 普及 し て お ら ず 、 文 法 な を ど は ほとん ど 無 視 し た HTML で 表示 指 
定 を 行う の が 一 般 的 で し た 。 し か も 、CSS に 十分 に 対応 し た ブラ ウザ も 、 当 時 は まだ 存在 し て い 
ませ ん で し た 。 その よう な 状況 に お いて 、HTML4.01 の 仕様 通り の Web ペ ー ジ を 制作 する こと は 
現実 的 に 困難 で ある こと が 予想 され た た め 、 本 来 な ら 正 し く な い 記 述 も 多少 は 認め た 暫定 仕様 で 








ある 「Transitionall も 用 意 さ れ た の で す 。 そ し て 、 そ の 暫定 仕様 に 加え て 、 ウ ィ ン ド ウ を 分 割 し 
て 表示 で きる フレ ー ム 機能 を 追加 し た 仕様 が 「Frameset| で す 。 


ぁみ HTML5 


現在 で は 多く の ブラ ウザ が CSS に 十分 対応 し 、CSS で 表示 指定 を する の が 一 般 的 と な っ て いる た 
め 、HTML5 か ら は 「Transitionall は な く な っ て いま す 。 ま た 、 フ レー ム は ほとん ど 利 用 され な く 
な っ て いま す の で 、HTML5 に は 「Frameset] も 用 意 さ れ て いま せん (ウィ ンド ウ を 分 割 す る の で 
は な く 、 ウ ィ ン ド ウ の 中 に 別 の ペー ジ を 組み 込む イン シラ イン フレ ー ム は HTML5 で も 利用 で きま す )。 
本 書 で は 、 こ の 最新 の 仕様 で ある HTML5 に 準拠 し て HTML を 解説 し て いき ます 。 


た だ し 、HTML5 は まだ 策定 途中 の 仕様 で ある た め 、 現 在 で も 微 調整 が 続け られ て 仕様 が 変更 され 
て いま す 。 そ の よう な 状況 で ある た め 、 ブ ラウ ザ の サポ ー ト も 完全 で は あり ませ ん 。 と は いえ 、 広 
く 一 般 的 に 利用 され て いる 部 分 に つい て は 、 す で に 利用 可能 と な っ て いま す の で 、 本 書 で は その よ 
うな 主要 な 部 分 を 中 心 に 解説 し て いき ます 。 








CSS の 基礎 知識 


続い て CSS に つい て 説明 し ます 。CSS の 書式 を 構成 する 各部 分 に も 名 前 が つい て いま す の で 
覚え て お きま し ょ う 。 書き 方 の ルー ル に つい て も 紹介 し ます 。 


ぁ CSS の 専門 用 語 


次 は CSS です 。 ま ず は CSS で 使わ れる 専門 用 語 か ら 説 明 し ます 。 





h1 { color: white: } 


セル 用 Be ィ 値 


h1 

{ 
color: wh1te: キーーーーーーーーーーーーーーーーーーーー ー 
宣言 ブロ ッ ク font-s1ze: 24px: ペーーーーーーーーーーーーーーーー 二 言 
text-shadow: 1pxX 1px 2px black: ーーーーーーー- 喜 言 


} 











CSS の ソー スコ ー ド の 各部 分 の 名 称 


CSS は 、 表 示 指 定 を どの 要素 に 対し て 適用 する の か を 最初 に 示し ます が 、 そ の 部 分 の こと を セレ 


クタ (selector) と いま す 。 


そし て 、 そ の 要素 に 対す る 具体 的 な 表示 指定 は 、 セ レク タ に 続く { } の 中 に 書い て いき ます 。1 つ 
ひと つの 表示 指定 (「 何 を どの よう に する か 」 を 示す 部 分 ) は 宣言 と 言い 、{ } を 含む その 範囲 全体 


を 宣言 ブロ ッ ク と 言い ます 。 


1 つの 宣言 は 、 プ ロ パ ティ 名 (「 何 を ] を 示す 部 分 ) と プロ パテ ィ 値 (「 ど の よう に する 」 を 示す 部 分 ) 
を 順に コロ ン (:) で 区 切っ て 指定 し ます 。 通常 は その 直後 に セミ コロ ン (:) を つけ ます が 、 こ れ は 
宣言 と 宣言 を 区 切る た め の 記号 な の で 、 宣 言 ブ ロッ ク 内 の 最後 の 宣言 に は につけ な く て も か まい ませ 
ん (ソー スコ ー ド の コピ ー& ペー スト を し た と き に セミ コロ ン を 付け 記 れ る ミス を 防ぐ 目的 で 、 


一 般 的 に は 最後 の 宣言 に ち セ ミコ ロン を つけ て お きま す )。 


CuAPTE る 文法 的 な カタ い 話 





みゆ 書き 方 の ルー ル 


セレ クタ 、 プ ロ パ ティ 名 、 プ ロ パ ティ 値 、{ } : : の 各 記 号 の 前 後に は 、 半 角 ス ペー ス ・ 改 行 ・ タ 
ブ を 自由 に 入れ る こと が で きま す 。 し た が っ て 、 次 の よう な さま 


ざま な 書き 方 が 可能 で す 。 





01 
02 
03 
04 
05 





] 

h1 

{ 
color 
font-size 
} 


1 h1 { 


color: white: 


font-size: 24Px: 











white 
24PX 





| hl1(color:whiteifont-s1ize:24px:} 














書式 を 構成 する 各部 分 の 間 に は 、 半 角 ス ペー ス ・ 改 行 ・ タ ブ を 入れ る こと が で きる 


どの よう な 書き 方 を する の も 自由 で す が 、 い つも 同じ 書き 方 を し て お か な いと コピ ー& ペース ト に 
よっ て 書式 が バラ バラ に な っ た り 、 予 想 外 の 編集 ミス を 招い た りす る こと が あり ます 。 い つも 王 定 
の パタ ー ン で 統一 させ て 書く こと が 効率 アップ に つなが る と いう こと を 覚え て お いて くだ さい 。 


また 、CSS の 適用 対象 を 示す セレ クタ は 、 カ ンマ (,) で 区 切っ て 同時 に 複数 を 指定 で きま す 。 た と 


えば 、h1 要素 、h2 要素 、p 要素 に 同時 に 同じ 表示 指定 を する 場合 は 、 次 の よう に 書き ます 。 








( こ 】 


01 
02 
03 
04 
05 
| 06 
| 07 





RI iR2/ pidH 
color: white: 


} 


font-size: 24Px: 








color: white: 


font-size: 24Dx: 

















複数 の 適用 先 に 同時 に 同じ 表示 指定 を する に は 、 セ レク タ を カン マ で 区 切っ て 指定 する 





s 
と 2 
1 
9 
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と コメ ント の 書き 方 


HTML と 同様 に 、CSS の ソー スコ ー ド 内 に も コメ ント を 書き 込む こと が で きま す 。 CSS で は 7* 
と *#7 で 囲っ た 範囲 が コメ ント と な り ま す 。 

ソー スコ ー ド 内 に 説明 や 注釈 を 入れ て お きた い 場 合 や 、 表 示 指 定 を 一 時 的 に 無効 に したい とき な ど 
に 利用 で きま す 。 





ーー 














CSS の コメ ント の 書き 方 。/* と */ で 囲 われ た 男 囲 が コメ ント 


CdAPTEk 3 文法 的 な カタ い 話 





CSS の バー ジョ ン に つい て 


CSS に も バー ジョ ン が あり ます 。 た だ し 、HTML の バー ジョ ン と は 少し 意味 合い が 異な り ま 
す の で 、 注 意 し て くだ さい 。 


ぁ b 現在 使用 され て いる の は CSS2.1 と CSS3 の 一 部 


HTML と 同様 に 、CSS に も いく つか の バー ジョ ン が あり ます 。 正確 に 言う と 、CSS の 場合 は “ バ 
ー ジ ョ ン ” で は な く "レベル" と いう 用 語 が 使わ れ て お り 、 新 し い レ ベル の CSS は 古い レベ ル の 
CSS を 元 に し て 機能 の 追加 と 改善 を 行う こと に な っ て いま す 。 つ まり 、「 レ ベル が 変わ る と 仕様 が 
変わ る ] と いう こと で は な く 、 基 本 的 に は 「 新 し じい レベ ル は これ まで の 仕様 を その まま に じ て 機 能 
を 追加 し た も の 」 で ある と いう こと で す 。 た だ し 、 そ の よう な 意味 を 除け ば 、 レ ベル と いう 用 語 
基本 的 に は バー ジョ ン の よう な 意味 あい で 使わ れ て いま す 。 


CSS に は 、 も っ と も 古い レベ ル で ある CSS1、 そ の 次 の レベ ル で ある CSS2、 そ れ を 現実 の 状況 に 
合わ せ て 再 調整 し た CSS2.1、 そ し て 、 そ れ を 元 に 仕様 書 を 機能 別に 分 割 し て 大 幅 な 機能 追加 を 行 
っ て いる CSS3 と いう 4 つの レベ ル が あり ます 。CSS3 に な っ て 仕様 書 を 分 割 し た の は 、 そ れ ま で 
の よう に 1 つの 仕様 書 に し て いる と 、 内 容 が 膨大 すぎ て な か な か 完成 させ る こと が で き な く な っ た 
か ら で す 。 機能 別に モジ ュー ル 化 し て お け ば 、 状 況 の 変化 に 応じ て より 早く 仕様 書 を 改訂 する こと 
が 可能 に な り ま す 。 


現時 点 で の 基本 と な る CSS は 、CSS2.1 で す 。CSS1 と CSS2 は 、 現 実 の 状況 に 合わ せ て 調整 され 
た CSS2.1 に よっ て 置き 換え られ た と 考え て お け ば よい で し ょ う 。CSS3 は まだ 一 部 の 機能 (モジ 
ュー ル ) の 仕様 し か 確定 し て いま せん が 、 そ れ ら を 含む 多く の 機能 が すでに 使用 され は じ め て いま 
す 。 つ まり 、 現 在 使用 され て いる CSS は 、CSS2.1 と CSS3 の 一 部 で ある と いう こと に な り ま す 。 
本 書 で は 、CSS3 に つい て は 、 現 時 点 で 使用 可能 な (比較 的 多く の ブラ ウザ に サポ ー ト され て いる ) 
も の を 取り 上 げ 、 そ れ 以 外 の 部 分 で は CSS2.1 を 使っ て 解説 し て いき ます 。 
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046 


と: すべ て の ブラ ウザ で 同じ に 見 えな く て も 良い 


た だ し 、IE6 の よう に CSS3 の 登場 する 以前 に リリ ー ス され た ブラ ウザ は 、 当 然 な が ら CSS3 に は 
対応 し て いま せん 。CSS3 の 一 部 の 機能 こつ いて は 、 そ の よう な ブラ ウザ の 独自 拡張 機能 や スク リ 
プ ト な ど で 同 様 に 表示 させ る こと も 可能 で す が 、 そ れ に よっ て 弊害 が 起き る こと も あり ます 。 
CSS3 を 導入 する 際 の 基本 は 、 ま ず CSS2.1 で きち ん と 見 られ る よう に 作っ て お き 、CSS3 に 対応 
た ブラ ウザ で 見 る と さら に 良 ぐ 見 える よう に する 、 と いう 考え 方 で 制作 する こと で す ( こ れ を 「 プ 
ログ レッ シブ : エ ン パ ンス メン ト 」 と 言い ます )。 


か つて は どの ブラ ウザ で も 同じ よう に 見 える よう に する こと が 当然 だ と 思わ れ て いた 時 期 も あり ま 
し た が 、 今 は 新しい ブラ ウザ で 見 る と カド が 丸く な っ て いる けれ ども 、 古 い ブ ラウ ザ で 見 る と カド 
は 丸く な っ て いな い 、 と いう よう に まつ た ぐ 同 じ に する こと に は と だ わら ず に 作る の が 主流 で す ( 特 
に 海外 の 大 手 サ イト は その よう に な っ て いま す )。 現在 で は 、CSS3 の 機能 を 使っ て 、 異 な る 環境 
や 画面 サイ ズ の 場合 は あえ て 異な る 表示 指定 を 適用 し て 違う 表示 に する こと も 多く な っ て き て いま 
す 。 少なくとも 、 ど の ブラ ウザ で 見 て も まっ た く 同 じ よ うに する 必要 は な く 、 十 い プ ラウ ザ で 見 で 
内容 が きち あと 分 か る よう に な っ て いれ ば OK、 と いう の が 現代 の 考え 方 だ と いう こと を 覚え て 
お いて くだ さい 。 


CaAPTE ょ 3 文法 的 な カタ い 話 








し ECT 
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urE 


HTML の 全体 構造 


Chapter 2 で は 、 テ キス ト に タグ を つけ た 」 <!DOCTYPE htm]> 


あと に 、 そ れ ら を ペー ジ 全 体 の 枠組 み と な | 0: <htmi> 
か PT な) | く head> 
る タグ の 中 に 入れ まし た 。 こ こ で は ます 、 | 04 <meta charset-"utf-8"> 
その 枠組 み の 各 部 分 に つい て 説明 し ます 。 <tit1e> サ ンプ ル </title> 
ここ に 書か れ て いる タグ は 、 す べ て が 文法 | oy <uoy 
的 に 必 有 因 と いう わけ で は あり ませ ん が 、 | 0 
一 般 的 な HTML で あれ ば 通常 は すべ て が 使 mom | 
用 され ます 。 Chapter 2 で 使用 し た HTML の ペー ジ 全 体 の 枠組 み と な る 
それ で は 、 こ の 枠組 み の 各 部 分 を 1 つ ず つ タグ 
確認 し て いき まし ょ う 。 


ぁみ > く <!DOCTYPE html> Inrrs 新 | 


まず は 先頭 に ある 、 普 通 の タグ と は ちょ っ と 違っ た 雰囲気 の タグ か ら で す 。 実 は これ は HTML の 中 
で は 特別 な 役割 を 持っ た も の で 、 要 素 の タグ で は な く DOCTYPE 宣 言 (文書 型 宣言 ) と 呼ば れ て い 
る も の で す 。 


HTML5 より 前 の 各 バ ー ジ ョ ン の HTML に は 、 そ れ ぞ れ に PTD (Document Type Definition : 文書 
型 定義 ) と 呼ば れる ファ イル が 用 意 さ れ て いま し た (Web の 仕様 を 作成 し て いる W3C と いう 組織 の 
サイ ト 内 に あり ます )。DTD に は 、 そ の バー ジョ ン の HTML で は どの 要素 ・ 属 性 が 使用 で きる の か 、 
各 要 素 は どこ に 何 回 どの 順序 で 配置 で きる の か 、 と いっ た 情報 が 独自 の 文法 で 記述 され て いま す 。 
そし て 、 そ の DTD を HTML の 先頭 に ある DOCTYPE 宣 言 で 指定 する こと で 、 そ の HTML ファ イル 
が どの バー ジョ ン の 文法 に し た が っ て 記述 され て いる の か を 示す ルー ル に な っ て いた の で す ( そ の 
よう な 意味 で 文書 型 宣 言 と いう 名 前 に な っ て いま す )。 


し か し 、2000 年 頃 か ら 、 各 社 ブ ラウ ザ は この DOCTYPE 宣 言 を 別 の 用 途 に も 利用 する よう に な っ 
て いき まし た 。 当時 、HTML で 表示 指定 を し て いた ペー ジ の ほとん ど は 文法 を 無視 し て お り 、 
DOCTYPE 宣 言 は つけ て いな か っ た の で 、DOOTYPE 宣 言 が な けれ ば 「HTML で 表示 指定 を し て 
いる 旧式 の ペー ジ 」、DOCTYPE 宜 言 が あれ ば 「 標 準 仕様 に 準拠 し た 新しい ペー ジ ] と いう 風 に 判 
定 し 、 ブ プラウザ の 表示 モー ド を 自動 的 に 切り 替え る よう に な っ た の で す 。 はじ め に Mac 版 の 





Internet Explorer が その 方 式 を 採用 する と 他社 の ブラ ウザ も それ に な らい 、 現 在 で は ほとん どの ブ 
ラウ ザ が 同様 の 仕組 み に な っ て いま す 。 


し か し 、HTML5 か ら は DTD は な く な り ま し た 。 も と も と DTD に 書か れ て いた 情報 は 、HTML5 の 
仕様 書 の 中 に 専用 の 言語 を 使用 せ ず に 書き 込ま れる こと に な っ た か ら で す 。 その た め 、 本 来 の 意 
味 か ら す れ ば HTML5 に は DOCTYPE 宣 言 は 不要 と な っ た の で す 。 と ころ が 現在 の ほとん どの ブラ 
ウザ は 、DOCTYPE 宣 言 を つけ な けれ ば 「HTML で 表示 指定 を し て いる 旧式 の ペー ジ ] と 認識 し 
て その ペー ジ を 扱っ て し まう こと に な り ま す ( そ の 場合 、 古 い ブ ラウ ザ の 独自 仕様 な ど に 合わ せ た 
表示 と な る の で 正しい 表示 結果 は 得 ら れ な く な り ま す )。 そ うな る こと を 回 避 す る 目的 で (つま り ブ 
ラウ ザ の 表示 モー ド を 制御 する だ け の 目的 で )、HTML5 で は 必要 最低 限 の シン プル な DOOCTYPE 
宣言 を つけ る こと と な っ て いま す 。 


な お 、 本 書 で は <!DOCTYPE html> の よう に 一 部 を 大 文字 で 記述 し て いま す が 、DOCTYPE 宣 
言 は 大 文字 で 書い て も 小文字 で 書い て も OK で す 。 


ぁみ html 要素 


DOCTYPE 宣 言 の あと に は <htm1> 一 </htm1l> を 配置 し ます 。 そ れ 以 外 の 要素 は すべ て その 中 
に 書き 込み ます 。 


ある 要素 の 中 に 直接 入っ て いる 要素 を その 要素 の 子 要素 で ある と 表現 する こと が あり ます 。 逆 に 、 
自分 を 直接 含ん で いる 要素 は 親 要 素 と いう こと に な り ま す 。HTML の 各種 要素 を この よう な 親子 関 
係 で 考え た と き 、html 要 素 は すべ て の 要素 の 先祖 と いう こと に な り ま す の で ルー ト 要 素 (the root 
element) と も 呼ば れ て いま す 。 





り l <!DOCTYPE htm]l> 
02 <htm1l> 
03 <head> 
04 <meta charset="utf-8"> 
05 <title> サ ンプ ル </tit1e> 
06 </head> 
07 <body> 







09 </body> 
10 </html> 











DOCTYPE 宣 言 を 除く すべ て の 要素 は html 要素 の 中 に 入れ る 








o45 








CO と たり ハ び の 


HTML4.01 と XHTML1.0 の DOCTYPE 宣言 


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ーーーーーーーーーー ニ ーーー ニ ーー ニー・ 


参考 まで に 、HTML4.01 と XHTML1.0 の DOCTYPE 宣 言 を 掲載 し て お きま す 。HTML5 より 前 の バー 
ジョ ン で は 、 こ の よう な 長い DOCTYPE 宣 言 が 使用 され て いま し た 。 バ パー ジョ ン が 同じ で も 、 種 類 
(Strict / Transitional / Frameset) に よっ て DOCTYPE 宣 言 が 異な っ て いる 点 に 注意 し て くだ さい 。 





HTML4.01 Strict の 場合 


く !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www .w3.org/TR/htm14/strict.dtd"> 


HTML4.01 Transitional の 場合 


く !DOCTYPE HTML PUBLIC "-//M3C//DTD HTML 4.01 Transitional//EN" 
"http : //www.w3.org/TR/htm14/1oose.dtd"> 


HTML4.01 Frameset の 場合 


く !DOCTYPE HTML PUBLIC "-//M3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/htm14/frameset.dtd"> 





HTML4.01 の DOCTYPE 宣言 





XHTML1.0 Strict の 場合 


く !DOCTYPE html PUBLIC "-//M3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtm11-strict.dtd"> 


XHTML1.0 Transitional の 場合 


く <!DOCTYPE html PUBLIC "-//M3C//DTD XHTML 1.0 Transitiona1l//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtm11-transitional .dtd"> 


XHTML1.0 Frameset の 場合 


く !DOCTYPE html PUBLIC "-//M3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtm11-frameset.dtd"> 











XHTML1.0 の DOCTYPE 宣 言 


CA『TEF 4 ペー ジ 全 体 の 枠組 み 








ぁ ぁ head 要素 と body 要素 


html 要素 以外 の 要素 は すべ て html 要素 の 中 に 書き 込み ます が 、html 要素 の 中 に 直接 入れ る こと が 
で きる の は 、head 要 素 と body 要素 だ け で す 。 か な ら ず head 要 素 ・body 要素 の 順 で 1 つ ず つ 入 
れる 決ま り に な っ て いま す 。 





01 <!DOCTYPE htm1> 
02 <htm1> 


03 <head> 

04 <meta charset="utf-8"> 

05 <tit1e> サ ンプ ル く </t1t]e> 

06 </head> 

07 <body> 

08 | 
09 </body> 


10 </html> 














html 要 素 の 中 に は 、head 要 素 と body 要 素 を 順に 1 つ ず つ 入 れる 


head 要素 は 、 そ の Web ペ ー ジ に 関す る 情報 を 入れ る た め の 要 素 で す 。 

た と えば 、 文 字 コ ヨー ド を 示す 要素 、Wepb ペ ー ジ の タイ トル を 示す 要素 、 適 用 する CSS フ ァイル の 
URL を 示す 要素 、 適 用 する JavaScript フ ァイル の URL を 示す 要素 、 と いっ た 要素 を 順不同 で 必要 
な だ け 入 れる こと が で きま す 。head 要素 に 入れ た 内 容 は 、 基 本 的 に は Web ペ ー ジ の 内 容 と し て ブ 
ラウ ザ で 表示 され る こと は あり ませ ん (た だ し 、 タ イト ル は ウィ ンド ウ の タイ トル バー や タブ な ど 
に 表示 され ます )。 


それ に 対し て body 要素 に は 、 ブ ラウ ザ で 表示 させ た い 内 容 を 入れ ます 。 つ まり 、 ブ ラウ ザ で Web 


ペー ジ の コン テン ツ と し て 表示 され る の は 、body 要 素 の 中 に 入れ られ た 内 容 な の で す 。body 要 素 
に も 、 必 要 な 要素 を 順不同 で いく つ で も 入れ る こと が で きま す 。 


この よう な 、 ど の 要素 の 中 に どの 要素 を どの 順番 で いく つ 入 れ ら れる か 、 と いう ルー ル は 要素 ご と 
に あら か じ め 決 め ら れ て いま す 。 本書 で は 、 巻 末 の Appendix で 一 覧 表 で 掲載 し て いま す の で 、 必 
要 に 応じ て 参照 し て くだ さい 。 








pb title 要素 


title 要 素 は 、 そ の Web ペ ー ジ の タイ トル で ある テキ スト を 入れ る 要素 で す 。 テ キス ト 以 外 の 他 の 
要素 は 入れ られ ませ ん の で 注意 し て くだ さい 。 

title 要素 の 内 容 は 、Web ペー ジ を 表示 する 際 に ブラ ウザ の ウィ ンド ウ の タイ トル バー また は タブ に 
表示 され ます 。 こ の 要素 は 、head 要素 の 中 に 必ず 1 つ だ け 入 れる 必要 が あり ます (head 要 素 内 で 
あれ ば 入れ る 場所 は 自由 で す )。 


く !DOCTYPE html> 

く htm]> 

く head> 

く meta charset="utf-8"> 
<title> サ ンプ ル </t1tle> 
く /head> 

く body> 


く /body> 
く /html> 


Web ペ ー ジ の タイ トル は tltle 要素 の 内 容 と し て 書き 込む 

















tltle 要素 の 内 容 は 、 こ の よう に タブ や タイ トル バー に 表示 され る 








ぁ ァ meta 要 素 ldrutswl 


meta 要 素 は 、 そ の Web ペ ー ジ 自身 に 関す る さま ざま な 情報 (メタ デー タ ) を 示す こと の で きる 要素 
で す 。 

ここ まで に 紹介 し て きた 要素 と は 異な り 、meta 要 素 は 各種 情報 を 要素 内 容 で は な く 属 性 の 値 に 書 
き 込ん で 示し ます 。 そ の た め 、meta 要 素 に は 常に 要素 内 容 が な く 、 終 了 タ グ も あり ませ ん 。 
HTML に は この よう な タイ プ の 要素 が いく つか あり 、 そ れ ら は 空 要素 と 呼ば れ て いま す 。 





01 <!DOCTYPE htm1> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> ーーーーー meta 要素 は 空 要素 な の で 開始 タグ の み 
05 <title> サ ンプ ル </tit]e> 

06 </head> 

07 <body> 





09 </body> 
10 </htm1> 








meta 要 素 に は 、 要 素 内 容 と 終了 タグ が な い 





空 要素 は 開始 タグ だ け を 書け ば いい の で す が 、 
XHTML の 書式 と の 互換 性 を 持た せる た め に 、 
右 の よう に 開始 タグ の 最後 の > の 直前 に (空白 
スペ ー ス ) / を 入れ る こと も で きま す 。 く meta charset="utf-8" /> 


1 


スペ ー ス 十 / を 入れ て も OK 


< く meta charset="utf-8"> 











HTML5 の 空 要素 は 、 こ の よう な 2 種類 の 書き 方 が で きる 


meta 要素 に は 、 次 の 属性 を 指定 する こと が で きま す 。 

「 文 字 コ ー ド 」 を 指定 する 場合 は 、charset 属 性 を 使用 し ます 。「 文 字 コー ド 」 以外 の 情報 を 指定 す 
る 場合 は 、name 属 性 また は http-equiv 属 性 の いずれ か で 「 情 報 の 種類 ] を 示し 、 具 体 的 な 情報 は 
content 属 性 の 値 と し て 指定 し ます 。name 属 性 と http-equiv 属性 の どちら を 使用 する か は 、 情 報 
の 種類 に よっ て 異な り ま す 。 


meta 要素 に 指定 で きる 属性 


・charset=" 文字 コー ド " 
この HTML ファ イル が どの 文字 コー ド で 保存 され て いる の か を 示し ます 。 
UTF-8 の 場合 は 「UTF-8]、 シ フト JIS の 場合 は 「Shift_JIS]、EUC の 場合 は 「EUC-JP] の 
よう に 指定 し ます (HTML5 で は UTF-8 で 保存 する こと を 推奨 し て いま す )。 
文字 コー ド を 指定 する 際 は 、 大 文字 と 小文字 を 区 別 せ ず に 使用 で きま す 。 








meta 要 素 に 指定 で きる 属性 (続き ) 





meta 要素 の 典型 的 な 使い 方 示し ます の で 参考 に し て くだ さい 。 


01 <head> 
02 ・・・ 
03 <meta name="generator" content="MordPress 3.4.1"> RA】 


04 <meta name-"description" content=" 札 幌 の お いし い お 店 を 紹介 する ブロ グ で す 。"> …@ 
05 <meta http-equiv="content-type" content="text/html: charset=Shift_JIS" ツ > …⑲ 
_06 ・・・ 

07 </head> 





meta 要 素 の 典型 的 な 使用 例 


meta 要素 は 、head 要素 内 の 任意 の 位置 で 何 度 で も 使用 で きま す 。 

は 、 そ の Web ペ ー ジ を 生成 し た ソフ トウ ェ ア が 「WordPress 3.4.1] で ある こと を 示し て いま す 。 

は Web ペ ー ジ の 簡単 な 紹介 文 で す 。 こ の 文章 は 、 検 索 結 果 と し て この ペー ジ が 一 覧 表示 され る 
と き に 利用 され る 場合 が あり ます 。 

⑮⑲ は 文字 コー ド を 指定 する 古い 方 法 で す 。 charset 属 性 に 未 対応 の ブラ ウザ 向け に 指定 で きま す が 、 
この 方 法 で 文字 コー ド を 指定 し た 場合 は 、 charset 属 性 に よる 文字 コー ド 指 定 は 入れ られ ませ ん 。 








CSS の 組み 込み 方 29 


析 組 み の 各 部 分 の 意味 と 役割 が 分 か っ た と ころ で 、 次 は その HTML に CSS を 組み 込む た め の 


3 種類 の 方 法 を 説明 し ます 。 1 つめ は Chapter 2 で CSS フ ァイル を 読み 込ま せ た と き の Iink 要 


素 を 使う 方 法 で 、2 つ め は style 要素 を 使っ て HTML フ ァイル の 中 に 直接 CSS を 書き 込む 方 法 、 


3 つめ は style 属 性 を 使用 し て 属性 値 と し て CSS を 書き 込む 方 法 で す 。 

















ぁみ link 要 素 


Chapter 2 で は 、Iink 要 素 を 次 の よう に 使用 し て CSS ファ イル を 読み 込ま せま し た (link 要 素 は 空 
要素 で す )。 こ の よう に 、rel 属 性 の 値 に は キー ワー ド 「sty]esheet] を 指定 し 、href 属 性 の 値 と 
し て CSS ファ イル の URL を 指定 する こと で 、CSS ファ イル を 読み 込ま せる こと が で きま す 。Ilink 
要素 は 、meta 要素 と 同様 に head 要素 内 の 任意 の 位置 で 何 度 で も 使用 で きま す 。 つ まり 、Iink 要 素 
を 複数 使用 する こと で 、 複 数 の CSS ファ イル を 読み 込ま せる こと も で きる と いう こと で す 。 


sample/chapter-04/lecture-4-2/01.html 
[ 





01 <!DOCTYPE html> 

02 <html> 

03 く <head> 

04 < く meta charset="utf-8"> 

05 <title> サ ンプ ル く </t1t]e> 

06 <]ink re]1="stylesheet" href="style.css"> 
7 </head> 

08 く body> 


1 < く /body> 
11 </html> 











Chapter 2 で CSS ファ イル を 読み 込ま せ た と き の 指定 


実際 に は 、Iink 要 素 は CSS ファ イル を 読み 込ま せる だ け で な く 、 そ の Web ペー ジ に 関連 する さま 
ざま な ファ イル を 示す こと の で きる 要素 で す 。rel 属 性 に は その ファ イル の 種類 を 表す キー ワー ド 
を 指定 し 、 そ の ファ イル の URL を href 属 性 で 示し ます 。 し か し 、 現 実 的 に は CSS ファ イル を 読み 
込ま せる 以外 の 用 途 で は あま り 使 用 され て いま せん (ほか の 用 途 で 使用 し て も 未 対応 で 機能 し な い 
ブラ ウザ が 多い た めで す )。Ilink 要 素 に 指定 で きる 属性 は 次 ペー ジ の 通り で す 。 











link 要 素 に 指定 で きる 属性 


・re]=" ファ イル の 種類 " ※ 必 須 
関連 する ファ イル の 種類 を キー ワー ド で 示し ます 。 
指定 で きる 値 は 次 の 通り で す ( 主 な も の の み 抜 粋 )。 な お 、 こ の 値 は 大 文字 で 書い て も 小文字 で 


書い て も か まい ませ ん 。 

| stylesheet スタ イル シー ト (CSS) 

| a1ternate | 代替 バー ジョ ン ( 異 な る 言語 や 異な る 操 体 向け な ど ) 
lprev | 連続 し て いる ペー ジ 中 の 前 の ペー ジ 

Inext_ | 連続 し て いる ペー ジ 中 の 次 の ペー ジ 


・href=" ファ イル の URL" ※ 必 須 
関連 する ファ イル の URL を 指定 し ます 。 


・med1a=" 適用 対象 " 
CSS を 適用 する 対象 の 出力 媒体 (パソ コン 画面 ・ プ リン タ ・ テ レビ な ど ) を 限定 し た い 場 合 に 指定 
し ます 。 
下 の 表 に 掲載 され て いる 値 が 指定 で きま す が 、 さ ら に 細か く 複 雑 な 指定 方 法 も あり ます 。 詳 細 
は Chapter 10 の 「 メ ディ アク エリ ー」 で 解説 し ます 。 こ の 属性 を 指定 し な か っ た 場合 は 、「a11」 
が 指定 され た 状態 と な り ま す 。 な お 、 こ の 値 は 大 文字 で 書い て も 小文字 で 書い て も か まい ませ ん 。 


休 | 意味 

la11 | すべ て の 機器 

| screen パソ コン 画面 

print | プリ ンタ 

projection | プロ ジェ クタ 

|ty | テレ ビ | 
handhe1d | 携帯 用 機器 (画面 が 小さ く 回 線 容量 も 小さ 機器 
tty 。 | 文字 幅 が 固定 の 端末 (テレ タイ プ や ター ミナ ル な ど ) 
speech スピ ー チ ・ シ ン セ サイ ザー( 音 声 読 み 上 げ ソ フト な ど ) 
braille | 点字 ディ スプ レイ 

| embossed | 点字 プリ ンタ 








・type="MIME タ イプ " 
関連 する ファ イル の MIME タ イプ を 指定 で きま す 。 こ の 属性 を 指定 し な か っ た 場合 は 「text/ 
css] が 指定 され た 状態 と な り ま す 。 
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COLVAAV / 


CSS ファ イル の 文字 コー ド の 指定 方 法 


HTML も CSS も UTF-8 で 保存 され て いる の で あれ ば 特に 必要 は あり ませ ん が 、HTML と CSS の 文字 
コー ド が 培う 場合 に は CSS 側 に も 文字 コー ド を 指定 し た 方 が 安全 で す 。CSS で 文字 コー ド を 指定 する 
に は 、 ソ ー ス コー ド の 先頭 に 次 の よう に 記述 し ます (必ず ファ イル の 先頭 に 記述 する 必要 が あり ます )。 


@charset "文字 コー ド ": | 


文字 コー ド と し て 指定 で きる の は 、meta 要 素 の charset 属 性 の 値 と 同様 で す 。 
UTF-8 の 場合 は 「UTF-8]、 シ フト JIS の 場合 は 「Shift_JIS]、EUC の 場合 は 「EUC -JP] の よう 
に 指定 し ます 。 


pb style 要素 


link 要 素 は 、CSS が 書か れ た 別 の ファ イル を 読み 込む た め に 使用 し まし た が 、head 要 素 の 中 に 


style 要 素 を 配置 する と 、 要 素 内 容 と し て 直接 CSS を 記入 する こと が で きま す 。 


sample/chapter-04/lecture-4-2/02.html 


く !DOCTYPE html> 

く html> 

く head> 

く meta charset="utf-8"> 

く title> サ ンプ ル く </t1t]e> 

< く style> 

body 1 background: orande:i 

h1, p { color: white: } 

D { font-size: 18px: } 

く /style> 

く /head> 

< く body> 

く h1> か ちか ち 山 く /h1> 

く P> 

昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま 」 と 呼ば れ て 
いま し た 。 山田 社長 に は 、 こ と ある ご と に 「Min-Min の 考え 方 が 大 切な ん で す 」 と 語り だ す ク セ が あり ま 
し た 。 

く /p> 

く /body> 

く /html> 


style 要素 を 使用 する と 、 内 容 と し て CSS を 直接 記入 で きる 
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し か し 、style 要 素 を 使用 する と 、HTML ファ イル の 中 に 表示 の 指定 を 組み 込ん で し まう こと に な り 、 
他 の HTML と CSS の 表示 指定 を 共有 で き な ぐ な っ で し じまい ます 。 そ の た め 、 こ の 方 法 は この 要素 
を 使用 すべ き な ん ら か の 理由 が ある 場合 (ブロ グ サ ービス で HTML の テン プレ ー ト し か 変更 で き な 
い 場 合 な ど ) を 除い て 、 そ れ ほ ど 多 く は 使用 され て いま せん 。Iink 要 素 と 同じ 次 の 属性 が 指定 で き 
ます 。 


style 要素 に 指定 で きる 属性 





pb style 属性 


任意 の 要素 に style 属 性 を 指定 し て 、 そ の 値 と し て CSS の 宣言 (プロ パテ ィ : 値 :) 部 分 を 書き 込 
むこ と が で きま す 。 そ の 際 、 指 定 し た 宣言 は style 属 性 を 指定 し た 要素 に 適用 され ます の で 、 セ レ 
クタ お よび 宣言 ブロ ッ ク の 範囲 を 示す 記号 { } は 不要 で す 。 


sample/chapter-04/lecture-4-2/03.html 


く !DOCTYPE html> 

く html> 

く head> 

く meta charset="utf-8"> 

<title> サ ンプ ル </tit1e> 

く /head> 

く <body style="background: orangei"> 

く h1 sty1e="color: white:"> か ちか ち 山 </h1> 

く p style="color: white: font-size: 18Dx:"> 

昔々 、 あ る 会 社 に 山田 と いう 名 前 の 若い 社長 さん が お り ま し た 。 社長 仲間 の あい だ で は 「 や ま 」 と 呼ば れ て 
いま し た 。 山田 社 長 に は 、 こ と ある ご と に 「Wwin-Min の 考え 方 が 大 切な ん で す 」 と 語り だ す ク セ が あり ま 
し た 。 

く /p> 

く /body> 

く /htm1> 


style 属 性 を 使用 する と 、 属 性 値 と し て CSS が 直接 記入 で きる 
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た だ し 、 こ の 方 法 を 使用 する と 、HTML の あちら こち ら に 細か く 表 示 指 定 を 埋め 込ん で し まう こと 
に な り メ ン テ ナ ンス ヌス 性 も 低下 し ます の で 、 通 常 は 使用 され ませ ん 。 主 に ちょ っ と し た 実験 や テス ト 
を する 際 な ど に 使用 する も の だ と 考え た 方 が いい で し ょ う 。 


CO たり M び / 


CSS の 中 に さら に 別 の CSS を 読み 込む 


HTML の 中 か ら CSS ファ イル を 読み 込む に は link 要 素 を 使用 し まし た が 、 同 様 に CSS の 中 か ら さ ら に 
別 の CSS フ ァイル を 読み 込む こと も で きま す 。 そ の 際 に 使用 する の が @import で 、 読 み 込 む CSS フ 
ァイル の URL は 次 の 例 の よう に " 〇 〇 〇 " また は ur1(" 〇 〇 〇 ") の 書式 で 指定 し ます 。 


@1mport "style.css": 
@1mport ur1("style.css"): 


URL 部 分 は 上 の どちら の 書式 で 書い て も よい 


また 、 こ の 書式 に は 適用 対象 と する 出力 媒体 (ink 要素 や style 要素 に 指定 で きる media 属性 の 値 と 同 
じ も の ) を 指定 する こと も で きま す 。 複数 の 出力 媒体 を 適用 対象 と する 場合 は 、 そ れ ら を カン マ (,) で 
区 切っ て 指定 し ます 。 


| @1mport ur1("print.css") print: 
@1mport ur1("tv.css") tv, projection: 


HTML の media 属 性 の 値 と 同じ も の を 指定 する こと も 可能 


この @jimport は 、Ilink 要素 で 読み 込む CSS ファ イル の 中 で で も 使用 で きま すし 、style 要素 の 内 容 と 
し て 書き 込む CSS の 中 で で も 使用 で きま す 。 た だ し 、 必 ず CSS に よる 表示 指定 より も 前 で 指定 する 
必要 が ある 点 に 注意 し て くだ さい 。@charset が ある 場合 は 、@charset を 先頭 に し て 、 そ の 直後 に 
指定 し ます 。 





マヨ ュ 4dy ロ う 








urE 和 う 
グロ ー バ ル 属 性 


し 


HTML5 の 属性 の 中 に は 、style 属性 の よう に どの 要素 に も 共通 し て 指定 で きる 属性 が あり ます 。 
その よう な 属性 は グロ ー バ ル 属 性 と 言い 、HTML5 で は 表 の 15 種類 が 定義 され て いま すき *。 





属性 名 記 

id 固有 の 名 前 

c1ass | 種類 を 示す 名 前 

title | 補足 情報 

1ang 昌 還 衣 言語 コー ド 

style | CSS の 宣言 

dr 文字 表記 の 方 向 

accesskey | ショ ー ト カッ トキ ー 

tab1ndex | タブ キー に よる 移動 の 順序 
hidden | 非 表示 

spellcheck | スペ ル チ ェ ッ ク の 有効 ・ 無 交 
contextmenu | コン テキ ス トメ ニュ ー の ID 
draggable | ドラ ッ グ の 可 ・ 不 可 

dropzone | ドロ ッ プ 時 の 挙動 (copy/move/link) 
contenteditable 。 | 編集 の 可 ・ 不 可 還 
| translate | 翻訳 する か どう か (yes/no) 5 


グロ ー バ ル 属 性 の 中 に は 、 定 義 は され て いる も の の まだ 実際 の 制作 で は ほとん ど 使 用 され て 
いな いも の も あり ます の で 、 こ こ で は 一 般 的 に 使用 され て いる 主要 な も の を ピッ クア ッ プ し て 
紹介 し て お きま す 。 


※5 : 実際 に は 、 こ の ほか に JavaScript で 使用 で きる 50 種類 以上 の イベ ント ハン ドラ も 定義 され て いま す 。 
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ー 般 的 に 使用 され て いる グロ ー バ ル 属 性 


と id 属性 


要素 に 対し て 固有 の 名 前 を つけ る 場合 に 使用 し ます 。 id 属性 に よっ て つけ られ た 名 前 は 、CSS で 
その 要素 だ け に 表示 指定 を する 場合 や 、 リ ンク に よっ て ペー ジ 内 の その 位置 まで ジャ ンプ させ る 場 
合 な ど に 使用 され ます 。 id 属性 は ペー ジ 内 の 特定 の 1 つの 要素 (また は その 場所 ) を 示す も の で す の 
で 、 同 じ ペ ー ジ 内 の 別 の 場所 で 同じ id 属性 の 値 を 指定 する こと は で きま せん 。 id 属性 の 値 は 、 同 
じ ア ルフ ァ ベ ッ ト で も 大 文字 と 小文字 は 別 の 文字 と し て 扱わ れ ま す の で 注意 し て くだ さい 。 


ぁ ゆ class 属性 


要素 の 種類 を 示す (分 類 と し て の 名 前 を つけ る ) 場合 に 使用 し ます 。 あ くま で 種類 を 示す た め の 属 
性 で す の で 、 同 じ ペ ー ジ 内 の 複数 箇所 で 同じ 値 を 指定 し て も 問題 あり ませ ん 。 ま た 、 値 は 半角 スペ 
ー ス で 区 切っ て 同時 に 複数 指定 する こと も で きま す (id 属 性 の 値 に は 半角 スペ ー ス は 入れ られ ませ 
ん )。id 属 性 の 値 と 同様 、class 属性 の 値 も 大 文字 と 小文字 は 区 別 さ れ ま す の で 注意 し て くだ さい 。 


ぁみ title 属性 


要素 に 対し て 補足 的 な 情報 を 加え た い 場 合 に 指定 し ます 。 一般 に 、 こ の 属性 に 指定 し た 値 は ツー 
ル チ ッ プ と し て (マウ スカ ー ソ ル を 載せ た と き に ) 表示 され ます 。 


ぁ plang 属 性 


要素 内 容 の 言語 (日 本 語 ・ 英 語 な ど ) を 示す 場合 に 使用 し ます 。 値 に は 、 日 本 語 な ら 「ja」、 英 語 な 
ら 「en」 の よう に 言語 コー ド を 指定 し ます 。 9 











し と cT り rc 


『 景 を 指定 する (1) 


で は 、 こ こま で に 覚え た 要素 に 対し て 、 さ っ そく CSS を 指定 し て みる こと に し まし ょ う 。 と 
いっ て も 、HTML の 枠組 み と な っ て いる 要素 の 中 で 表示 指定 の 対象 に で きる 要素 は body 要素 
くら い * で す の で 、 ま ず は body 要素 (ペー ジ 全 体 ) の 背景 を 指定 し て み ま す 。 

また 、「Lecture 4-2 CSS の 組み 込み 方 」 で は style 要素 に つい て 学習 し まし た の で 、CSS 
は ここ で は style 要素 の 内 容 と し て 書き 込み ます (その あと は 基本 的 に link 要 素 を 使用 し ます )。 


ぁみ background-color プ ロ パ ティ 


は じ め に 、Chapter 2 で すでに 行っ た よう に 、 痛 景色 を 指定 し て み ま す 。 

た だ し 、Chapter 2 で は background と いう プロ パテ ィ を 使用 し まし た が 、 こ こ で は それ と は 少 
し 違う background=color と いう 名 前 の プロ パテ ィ を 使用 し ます (background プロ パテ ィ に つ 
いて は Ohapter 7 で 詳し く 解 説 し ます が 、background は 背景 色 以 外 に も 色々 と 指定 で きる プロ 
パテ ィ で す )。 

background-color プロ パテ ィ に 指定 で きる 値 は 、 次 の 通り で す 。 


background-color に 指定 で きる 値 


・ 色 
色 の 書式 に 従っ て 任意 の 背景 色 を 指定 し ます 。 


・transparent 
背景 色 を 透明 に し ます 。 


本 書 で は 、 プ ロ パ ティ の 値 の うち 日 本 語 で 書い て ある 部 分 は その 意味 する も の に 置き 換え た 値 で 
指定 する こと を 意味 し 、 半 角 の アル ファ ベッ ト や 記号 で 書い て ある 部 分 は キー ワー ド ( ま た は 書式 
の 一 部 ) と し て その まま 指定 する こと を 意味 し て いま す 。 こ れ 以 降 、 各 プロ パテ ィ に 対し て 指定 で 
きる 値 に つい て は 、 そ の ルー ル で 統一 し て 書い て あり ます の で 覚え て お いて くだ さい 。 


た と えば 、background-color に 指定 で きる 値 の うち 、「 色 ] に つい て は black、white、red 
の よう な 一 般 的 な 英語 の 色 名 に 置き 換え て 指定 し ます ( 色 を 指定 する た め の 詳 し い 書式 に つい て は 
Chapter 5 で 詳し く 解 説 し ます )。「transparent] は キー ワー ド で す の で 、「background- 


※6 : 正確 に 言え ば 、html 要 素 に 対し て も CSS で 表示 指定 を お こ な う こと が で きま す 。 








co1or: transparent:j] の よう に その まま 指定 する こと で 、 背 景 が 透明 に な り ま す 。 


な お 、background-color は HTML の すべ て の 要素 に 指定 で き 、 初 期 値 は も ransparent、 つ 
まり 透明 で す 。Chapter 2 で 見 出し や 本 文 に 特に 背景 色 が つか ず に 、body 要 素 の 背景 色 が 透け て 
見 えて いた の は 、 見 出し や 本 文 の 背景 色 が 初期 値 の transparent に な っ て いる た めで す 。 た だ 
し 、body 要素 だ け は 特別 で 、 初 期 状 態 で ほ ブ ラウ ザ で 設定 され で いる 色 が 表示 され る よう に な っ 


て いま す 。 


それ で は 、 さ っ そく HTML の 枠組 み の body 要 素 に 対し て 背景 色 を 指定 し て み ま し ょ う 。 次 の サン 


プル で は pink を 指定 し て いま す 。 


sample/chapter-04/lecture-4-4/01-background-color.html 








01 <!DOCTYPE html> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <t1t1e> サン プル </tit]e> 

06 <style> 

07 body { background-color: pink: ] 
08 </sty1e> 

09 </head> 

10 <body> 


12 </body> 
13 </html> 











body 要素 の 背景 色 を 「p1nk] に 指定 し て いる 例 





body 要素 の 背景 色 と し て 「pink] を 指定 し た と き の 表示 例 








テキ スト エディ タ で それ 以外 の 色 (black・white・gray・red・blue・yellow・green) に 
書き 換え て 保存 し 、 ブ ラウ ザ で 再 表示 させ て 色 が 変化 する こと を 確認 し て みて くだ さい 。 























[p ink 以外 の 色 を 指定 し た 場合 の 表示 例 
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と ぁ background-image プロ パテ ィ 


さて 、 次 は body 要素 の 背景 に 画像 を 表示 させ て み ま し ょ う 。 
背景 画像 を 表示 させ る に は 、background-image プロ パテ ィ を 使用 し ます 。 指 定 で きる 値 は 次 の 
通り で す 。 


background-image に 指定 で きる 値 








で は さっ そく body 要素 に 背景 画像 を 指定 し て み ま し ょ う 。 
画像 ファ イル は 、 左 の サン プル ファ イル と 同じ フォ ル ダ 内 の 「images] と いう フォ ル ダ の 中 に 入 
っ て いる 「photo.jpg」 を 使用 し ます 。 


sample/chapter-04/lecture-4-4/02-background-image.html 


く !DOCTYPE html> 

く html> 

く head> 

< く meta charset="utf-8"> 
<title> サ ンプ ル く </tit1e> 
く sty]e> 


body { background-image: ur1(images/photo.jpg): } 
く /sty1e> 

く /head> 

く body> 


</body> 
く /html> 


body 要 素 の 背景 と し て 「images/photo.jpg」 を 指定 し て いる 例 





この サン プル を 表示 させ る と 、 次 ペー ジ の 図 の 左側 の よう に 表示 され ます 。 
し か し 、 ウ ィ ン ド ウ を 広げ て みる と 、 右 側 の よう に 画像 が タイ ル 状 に 繰り 返さ れ て いる こと が 分 か 
り ま す 。 この 繰り 返し を 制御 よる に は 、 次 に 紹介 する background-repeat プロ パテ ィ を 使用 し ます 。 

















背景 全体 に 画像 が 表示 され た 





画像 が タイ ル 状 に 繰り 返さ れ て いる 


CO た り ハ びび / 


背景 画像 の URL に つい て 
background-image プロ パテ ィ の 値 は url( 画 像 の アド レス ) の 書式 で 指定 し ます が 、 こ の 「 画 像 の ア 
ドレ ス 」 の 部 分 に は 絶対 URL と 相対 URL の 両方 が 指定 で きま す 。 絶対 URL と は 、「http://www. 
example.com/images/photo.jpg] の よう な ブラ ウザ の アド レス バー な ど に 表示 され る 形式 で す 。 相 
対 URL は 、 同 じ デ ィ ス ク 上 に ある ファ イル を 相対 的 な 位置 で 示す 形式 で 、 下 の 階層 に ある ファ イル や 
フォ ル ダ の 名 前 は / で 区 切っ て 後ろ に 続け て 示し 、 上 の 階層 の 場合 は 階層 の 数 だ け 前 に ../ を つけ て 
示す 形式 で す 。 た と えば 、2 つ 上 の 階層 に ある images フォ ル ダ の 中 の photo.jpg を 指定 する 場合 は 
../../1mages/photo.jpg と な り ま す 。 
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background-repeat プロパ ティ 





background-repeat プロ パテ ィ は 、 背 景 画 像 を と の よう に 繰り 返し て 表示 させ る か 、 ま た は 繰り 


返さ な いか を 指定 する プロ パテ ィ で す 。 次 の 値 が 指定 で きま す 。 


background-repeat に 指定 で きる 値 
・repeat 
背景 画像 を 縦横 に 繰り 返し て (タイ ル 状 に 並べ て ) 表示 させ ます 。 


*・no-repeat 
背景 画像 を 繰り 返さ ず に 、1 つ だ け 表 示さ せま す 。 


・Tepeat-X 
背景 画像 を 横 に の み 繰 り 返 し て 表示 させ ます 。 


・Tepeat-y 
背景 画像 を 縦 に の み 繰 り 返 し て 表示 させ ます 。 


さき ほど の サン プル で 使用 し た 背景 画像 は 大 きす ぎ て 繰り 返し の 状態 を 
確認 し に くい の で 、 こ こ で は 右 の よう な 小さ め の 画 像 を 使用 し ます 。 


で は 、 こ の 背景 画像 を 指定 し 、 さ ら に background-repeat プロ パテ ィ も 
指定 し て み ま し ょ う 。 以下 の 例 で は 、 値 は 初期 値 の 「mepeat] に な っ て 
いま す が 、 テ キス ト エ ディ タ で それ 以外 の 値 に も 変更 し て 次 ペー ジ の 図 
の よう に 並び 方 が 変化 する こと を 確認 し て くだ さい 。 


sample/chapter-04/lecture-4-4/03-backqground-repeat.html 








次 の サン プル で 表示 させ る 
背景 画像 。 縦 150 ピ クセ ル 
メ 横 150 ビ クセ ル 





り 1 く !DOCTYPE htm1> 

02 <htm]> 

03 <head> 

4 < く meta charset="utf-8"> 

05 <t1t1e> サ ンプ ル く </t1t1e> 

5 < く style> 

07 body 【 

08 background-1mage: url(images/she11.jpg): 
09 background-repeat: repDeat: 
10 } 

1]」 </sty]le> 

12 </head> 

13 <body> 

14 

15 </body> 

15 </htm1> 








背景 画像 を 指定 し 、 縦 横 に 繰り 返し て 表示 する よう に 指定 し て いる 例 














値 が repeat-x の と き の 表 示 値 が repeat-y の と き の 表 示 


背景 に 関連 する プロ パテ ィ は これ ら 以 外 に も あり ます が 、 残 り の プロ パテ ィ に 関し て は Chapter 7 
で (も う 少 し ほか の 要素 と プロ パテ ィ を 覚え た 段階 で ) 紹介 し ます 。 
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テキ スト 関連 の 要素 


と 要素 の 分 類 Imrwtswl 


HTML5 に は 約 100 種 類 の 要素 が あり 、 そ れ ら は 大 きく 次 の 8 種類 の カテ ゴリ ー に 分 類 さ れ ま す 。 
具体 的 に どの 要素 が どの カテ ゴリ ー に 該当 する か は Appendix の 「HTML5 の 要素 の 分 類 ] に 掲載 
し て あり ます が 、 今 の 段階 で は 「 こ の よう な カテ ゴリ ー が ある | と いう こと だ け 覚 えて お け ば OK 
で す 。 


1. 自由 配置 コン テン ツ (Flow content) 

2. 見 出し コン テン ツ (Heading content) 

3. セ クシ ョ ンコ ン テ ン ツ (Sectioning content) 

4. 文章 内 コン テン ツ (Phrasing content) 

5. 組み 込み コン テン ツ 了 content) 

6. イ ンタ ラク ティ ブ コ ン テ ン ツ (Interactive content) 
な デー タコ ン デ ン ツ Na content) 

8. その 他 の コン テン ツ 


これ ら 8 種 類 の カテ ゴリ ー 同 士 の 関係 は 次 ペー ジ の 図 の よう に な っ て お り 、 多 く の 要 素 は 複数 の カ 
テ ゴ リ ー に 含ま れ ま す ( 逆 に どの カテ ゴリ ー に も 含ま れ な い 要 素 も あり ます )。 


自由 配置 コン テン ツ と は 、 あ る 特定 の 要素 の 内 部 に し か 配置 で き な い と いっ た 制限 が な く 、body 
要素 の 内 部 で あれ ば 基本 的 に どこ に で も 配置 で きる 要素 と いう 意味 で 、 ほ と ん どの 要素 は まず この 
カテ ゴリ ー に 含ま れ て いま す 。 そ し て 、 そ れ ら の ほとん ど は 自由 配置 コン テン ツ で あり つつ 、 他 の 
カテ ゴリ ー に も 含ま れ ます 。 




















HTML5 の 要素 の カテ ゴリ ー。 多 く の 要 素 は 複数 の カテ ゴリ ー に 該当 する が 、 ど れ に も 該当 し な い 要 素 
も ある 


HTML5 で は 、「 ど の 要素 を どこ に 配置 で きる か 」「 ど の 要素 に は どの 要素 を 入れ られ る か 」 と いっ た 
情報 を 示す 際 に この カテ ゴリ ー を 使用 し ます 。 詳 細 は Appendix の 「HTML5 の 要素 の 配置 の ルー ル ] 
に 掲載 し て あり ます の で 、 本 書 を 読み 進め な が ら 必要 に 応じ て 参照 し て くだ さい 。 


さて 、 ま だ 要素 も ほとん ど 覚 えて いな い 段 階 で す の で 、8 種 類 の カテ ゴリ ー に つい て は ここ で 覚え 
る 必要 は あり ませ ん 。 し か し 、HTML5 よ り も 前 の バー ジョ ン の HTML で 使用 され て いた 「 お お 
ま か な 分 類 方 法 ] に つい て は 、 覚 えて お いた 方 が 良い で し ょ う 。 な ぜ な ら 、 そ の 分 類 方 法 は 
HTML4.01 や XHTML1.0、 さ ら に は CSS2.1 で 今 で も 主要 な (単純 明快 で 分 か りや すい ) 概念 と し 
て 使わ れ て いる か ら で す 。 


その 考え 方 と は 、 す べ て の 要素 を 大 きく 「 ブ ロッ クレ ベル 要素 |[ イン ライ ン 要 素 」「 その他 の 要素 」 
の 3 種類 に 分 ける と いう も の で す 。 簡単 に 言え ば 、 ブ ロッ クレ ベル 要素 と は 、1 つ の まとまっ た 単 
位 と な っ て いる ひと か た まり の (ペー ジ 内 の 1 ブロ ッ ク を 構成 する よう な ) テ キス ト の こと を 示し ま 
す 。 た と えば 、 見 出し や 段落 (Chapter 2 で 登場 し た h1 要素 と p 要 素 ) は ブロ ッ ク レ ベル 要素 の 分 
か りや すい 例 で す 。 


それ に 対し て イン ライ ン (inline= 行内) 要素 と は 、 ブ ロッ クレ ベル 要素 の 中 に 入っ て いる テキ スト 
(文章 ) の 一 部 分 と な る よう な 要素 の こと を 言い ます (た だ し 、 必 ず し も テキ スト だ け で は な く 、 文 
章 の 一 部 に 入る こと も ある 画像 な ども イン ライ ン 要 素 に 含ま れ ま す )。HTML5 に お ける 「 文 章 内 コ 
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ン テ ン ツ | は 、 こ の 「 イ ン ラ イン 要素 ] と ほぼ 同様 の 分 類 に あたり ます 。 


な お 、 イ ン ラ イン 要素 や 文章 内 コン テン ツ に は 、 ブ ロッ クレ ベル 要素 内 で 特に タグ が つけ られ て い 
な い 普 通 の テキ スト も 含ま れ ま す 。 つ まり 、「 要 素 内 容 と し て イン ライ ン 要 素 を 入れ る こと が で き 
ます 」| と 書い て ある 場合 は 、 要 素 内 容 と し て 普通 の テキ スト も 入れ られ る と いう こと を 意味 し ます 。 


ブロ ッ ク レ ベル 要素 は 1 つの まとまり と し て 独立 し た も の で す の で 、 そ の 前 後 が 他 の 要素 の テキ ス 
ト と 同じ 行 の まま つなが る こと は あり ませ ん 。 基 本 的 に は 、 ブ ロッ クレ ベル 要素 の 前 後 は 改行 され 
た 状態 と な り ま す 。 それ に 対し て イン ライ ン 要 素 は 文章 の 一 部 と し て 使用 し ます の で 、 そ の 前 後 は 
同じ 行 の まま つなが っ て 表示 され ます (これ ら は CSS を 指定 し て いな い 状 態 で の 話 で 、CSS を 使用 
すれ ば 表示 は どの よう に で も 変更 で きま す )。 


ちな み に 、 ブ ロッ クレ ベル 要素 と イン ライ ン 要 素 の どちら に も 該当 し な い “その 他 の 要素 "に は 、 
Chapter 4 で 学習 し た HTML の 枠組 み と し て 使用 され る 要素 や 、 た と えば 表 の 内 部 で の み 使 用 可能 
な 要素 の よう に 限定 され た 特定 の 範囲 内 で し か 使用 で き な い 要素 な ど が 含ま れ て いま す 。 


それ で は 、HTML5 の 複雑 な 分 類 で は な く 、 ま ず は この ブロ ッ ク レ ベル 要素 と イン ライ ン 要 素 と い 
う シ ンプ ル な 分 類 で 、HTML5 の テキ スト 関連 要素 を 見 て いき まし ょ う 。 


pb 従来 の ブロ ッ ク レ ベル 要素 に 該当 する 要素 erws ぁ l 


右 の 表 に 示し た の が 、 テ キス ト 関 連 で 
従来 の ブロ ッ ク レ ベル 要素 に 該当 する 
要素 で す 。 た だ し 、 従 来 の ブロ ッ ク レ 
ベル 要素 に 該当 する 要素 は これ で 全部 


と いう わけ で は あり ませ ん 。 こ こ で 紹 本 ES ュー っ 宇 

介し て いる 要素 は 、 あ くま で テキ スト 本 に ニー 
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部 分 に タグ を つけ る 際 の 基本 と な る ブ iTML5 の テキ スト 関連 要素 の う ち 、 従 来 の ブロ ッ ク レベ ル 要 素 に 該当 す 


ロッ クレ ベル 要素 で す 。 














blockquote 


















「h1 ぞ h6] と 表記 し た 要素 は 、h1・h2・h3・h4・h5・h6 と いう 6 種類 の 要素 を まとめ て 表し た も 
の で す 。Chapter 2 で は h1 要 素 だ け を 紹介 し まし た が 、 ア ルフ ァ ベ ッ ト の 「h] は 「heading] の 
略 で 、 こ れ が 見 出 じ を あら わす 要素 で ある こと を 示し て いま す 。 そ れ に 続く 1 一 6 の 数 字 は 、 見 出 
し の 階層 (レベル) を あら わし て お り 、1 が 大 見 出し (一 番 上 の 階層 ) で 数 が 大 きく な る ほど 下 の 階 層 
の 見 出し と な り ま す 。 


CgAPTE を た で テキ スト 


し か し 、HTML5 より も 前 の HTML・XHTML に お いて は 、 こ の 数 字 で し か 階層 を 示せ ませ ん で し 
た が 、HTML5 で は 新しい 別 の 方 法 も 用 意 さ れ て いま す 。 見 出し の 階層 を 示す 別 の 方 法 に つい て は 、 
それ に 関連 する 新 要 素 と と も に Chapter 7 で 解説 し ます 。 


hgroup 要素 は 、 見 出し を グル ー プ 化す る 要素 で す 。 見 出し を グル ー プ 化す る た め の 専 用 要素 で す 
の で 、 要 素 内 容 と し て 入れ られ る の は h1 一 h6 要素 の いずれ か だ け で す 。 


一 般 に 新しい 見 出し が 登場 する と 、 そ こ か ら 新 し い 章 や 節 が 始ま る と 認識 され ます (ブラ ウザ も そ 
の よう に 認識 し ます )。 し か し 、1 つ の 見 出し の 内 容 を 主題 と 副題 の よう に 分 け て h1 要 素 と h2 要素 
を 連続 し て 使っ た よう な 場合 は 、 そ れ が まとめ て 1 つの 見 出し と し て 扱う べき も の で ある の か 、 そ 
れ と も 「 第 1 章 第 1 節 ]」 の よう に 2 つの 独立 し た 見 出し と し て 扱う べき も の な の か 、 ブ ラウ ザ は 判 
断 す る こと が で きま せん 。 そこで 、 連 続 す る 2 つの 見 出し が 主題 と 副題 で ある (つま り 2 つ セッ ト で 
1 つの 見 出し で ある 見 出し の 2 つの 階層 を 表し て いる わけ で は な い ) こ と を 明確 に 示し た い 場 合 
に 、 そ れ ら を < く hgroup> て </hgroup> で 囲う 、 と いっ た 使い 方 を し ます 。 

hgroup 要素 に つい て も Chapter 7 で 再度 詳し く 解 説 し ます の で 、 こ こ で は 見 出し は グル ー プ 化 で 
きる と いう こと だ け を 覚え て くだ さい 。 





01 <hgroup> 

02 <h1> か ちか ち 山 </h1> 

03 <h2>Min-Min が 大 好き な 山田 社長 の 物語 </h2> 
04 </hgroup> 


hgroup 要素 の 使用 例 














p 要 素 は 、Chapter 2 で 紹介 し た と お り 、 そ の 内 容 が 1 つの 段落 (paragraph) で ある こと を 示す 要 
素 で す 。 内容 と し て 入れ られ る の は イン ライ ン 要 素 に 該当 する 要素 だ け で 、 ブ ロッ クレ ベル 要素 は 
入れ る こと が で き な い 点 に 注意 し て くだ さい 。p 要 素 は 見 出し 関連 要素 と 共に も っ と も 頻繁 に 使わ 
れる 要素 の 1 つ で す の で 、 し っ か り と 覚え て お きま し ょ う 。 


blockquote 要素 は 、 そ の 部 分 が 引用 文 で ある こと を 示す ブロ ッ ク レ ベル 要素 で す 。 も し 、 ブ ロッ 
クレ ベル 要素 と し て で は な く 、 文 章 内 の 一 部 分 (イン ライ ン 要 素 ) と し て 引用 文 を 含め る 場合 は 、 
後述 の q 要 素 を 使用 し ます 。blockquote 要素 の 内 容 に は 、 ブ ロッ クレ ベル 要素 で も イン ライ ン 要 
素 で も 自由 に 入れ られ ます 。 cite 属 性 を 指定 し て 引用 先 の URL を 示す こと も で きま す 。 この 要素 は 、 
ブロ グ の 記事 で 別 の 記事 を 引用 する 場合 な ど に よく 使わ れ ま す ( 一 般 的 な ブロ グ サ ービス で は 、 こ ご 
の タグ を つけ る と 引用 文 向け に 用 意 され た 表示 指定 が 適用 され る よう に な っ て いま す )。 





01 <blockquote cite="http://example.com/about.htm1"> 
02 <p> ~ 引用 文 ご </p> 
03 </b1ockquote> 


blockquote 要素 の 使用 例 
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pre 要 素 は 、 そ の 内 容 が 整形 済 あ の テキ スト (preformatted text) で ある こと を 示す 要素 で す 。 一 般 
的 な ブラ ウザ で は 半角 スペ ー ス や 改行 な ど が 入力 し た 状態 の まま で 等 幅 の フォ ント で 表示 され ます 
(具体 的 な 表示 方 法 は も ちろ ん CSS で 変更 可能 で す )。ASCII アー ト を 表示 させ る よう な 場合 に も 
使用 で きま す が 、 ソ ー ス コー ド を 表示 させ る 場合 な ど に 多く 使用 され ます 。 要素 内 容 と し て 入れ ら 
れる の は イン ライ ン 要 素 に 該当 する 要素 だ け で 、 ブ ロッ クレ ベル 要素 は 入れ られ な い 点 に 注意 し て 
くだ さい 。 


div 要 素 の div は division の 略 で 、 た だ その 範囲 が プロ ッ ク レ ベル 要素 で ある こと だ け を 示し ます 。 
基本 的 に は 、 ブ ロッ クレ ベル 要素 の 中 で 他 に ふさ わし い 要 素 が な い 場 合 に 使用 し ます が 、 複 数 の 
ブロ ッ ク レ ベル 要素 を グル ー プ 化す る 際 な ど に 多く 使用 され ます 。div 要 素 の 内 容 に は 、 ブ ロッ ク 
レベ ル 要 素 で も イン ライ ン 要 素 で も 自由 に 入れ られ ます 。 


と 従来 の イン ライ ン 要 素 に 該当 する 要素 (1) Irursl 


次 は 、 テ キス ト 関 連 で 従来 の イン ライ ン 要 素 に 該当 する 要素 で す 。 テ キス ト 関 連 の イン ライ ン 要 素 
は 数 が 多い の で 、 比 較 的 多く 使用 され る も の と 、 そ れ ほ ど 多 く は 使用 され な いも の の 2 つ に 分 け て 
紹介 し ます 。 

な お 、 各 要素 の 解説 部 分 で は 触れ ませ 
ん が 、 イ ン ラ イン 要素 の 場合 、 特 別 な 
例外 を 除い て 要素 内 容 と し て 入れ られ 
る の は イン ライ ン 要 素 だ け で す (つま 
り 内 容 と し て ブロ ッ ク レ ベル 要素 は 入 
れ ら れ ま せん )。 で は 、 は じ め に 比較 
的 多く 使用 され る イン ライ ン 要 素 か ら 
見 て いき まし ょ う 。 

















引用 文 
作品 名 
ソー スコ ー ド 










一 般 に 小さ な 文字 で 掲載 され る 部 分 
|SDan 5 | 汎用 イン ライ ン 要 夫 


HTML5 の テキ スト 関連 要素 の うち 、 比 較 的 多く 使用 され る イン ライ ン 要 
素 

















Chapter 3 で 説明 し た と お り 、HTML の ソー スコ ー ド の 中 で 改行 を 入れ て も 、 ブ ラウ ザ で 表示 させ 
た と き に は 半角 スペ ー ス に 置き 換え られ て し まい 、 そ の 位置 で は 改行 は し ませ ん 。 ブ ラウ ザ で 表示 
させ た と き に 改行 させ る た め に は 、 改 行 さ せ た い 位置 に br 要素 を 配置 し ます 。 た と えば 住所 と 名 
前 を 掲載 する 場合 に 、 住 所 と 名 前 の 間 に 改 行 を 入れ る よう な 用 途 で 使用 し ます 。 


br 要素 は 単純 に その 位置 で 改行 させ る た め だ け に 使用 され る 要素 で す の で 、 要 素 内 容 と 終了 タグ 
の な い 空 要素 と し て 定義 され て いま す 。 な お 、br 要 素 の br は 、 改 行 を あら わす 英語 「line break 
の 「br| で す 。 














01 <p> 

02 〒012-3456<br> 

03 北海 道 札幌 市 鳥獣 保護 区 1-2-3<br> 
04 大 藤 幹 

05 </p> 


br 要素 の 使用 例 








em 要素 は 、 そ の 部 分 が 強調 され て いる こと を 示す 要素 で す 。em は 、 強 調 と いう 意味 の 英 単語 
「emphasis] の 略 で す 。 一般 的 な ブラ ウザ で は 斜体 で 表示 され ます が 、 表 示方 法 は CSS で 自由 に 
変更 で きま す 。 


strong 要 素 は 元々 は em 要素 より も さら に 強い 強調 部 分 を 示す 要素 で し た が 、HTML5 か ら は その 
部 分 が 重要 で ある こと を 示す 要素 に 変更 され まし た 。 一般 的 な ブラ ウザ で は 太字 で 表示 され ます 
が 、 表 示方 法 は CSS で 自由 に 変更 で きま す 。 


em 要素 が 示す 「 強 調 」 と 、strong 要素 が 示す 「 重 要 性 ] は 一 見 する と 同じ こと の よう に 感じ ます が 、 
「 強 調 ] は どこ を 強調 する か に よっ て 文章 の 意味 が 変わ っ て し まう と いう 点 が 異な り ま す 。 た と えば 、 
「<em> 僕 は く /em> 彼女 が 好き で す ] の よう に タグ を 付け た 場合 、 ほ か の 人 は どう か 分 か ら な い が 
“ 僕 は " 好き だ と いう 意味 に な り ま す 。 し か し 、「 僕 は <em> 彼女 が く /em> 好き で す 」 に な る と 、 
僕 は ほか の 人 で は な く “彼女 が " 好き だ と いう 意味 に な り ま す 。 ま た 、 強 調 す る と いう こと は 、 
Web ペ ー ジ の 内 容 を 音声 で 読み 上 げ る 場合 の アク セン ト に も 影響 を 与え ます 。strong 要素 が 示す 
「 重 要 性 ] は 、 文 章 の 意味 を 変え て し まう こと は な いと いう 点 で 、em 要素 が 示す 「 強 調 ] と は 異 
な り ま す 。 


q 要 素 は 、 そ の 部 分 が 引用 文 (quotation) で ある こと を 示す イン ライ ン 要 素 で す 。 同 じ 引 用 文 を あ 
ら わ す blockquote 要素 の イン ライ ン 版 で す 。blockquote 要素 と 同様 に 、 引 用 先 の URL を 示す 
cite 属性 も 指定 で きま す 。 一般 に 、 日 本 語 で 文章 中 に 引用 文 を 含む 場合 に は その 部 分 を 「 」 で 囲 
いま す が 、 そ の よう な 記号 は CSS で 表示 させ る こと に な っ て いま す ( 具 体 的 な 指定 方 法 は Chapter 
10 で 解説 し ます )。 要 素 内 容 の テキ スト と し て 、「 」 や その 他 の 引用 符 な ど は 含め な いよ うに 注意 
し て くだ さい 。 


た だ し 、 イ ン ラ イン の 引用 文 に 関し て は 、q 要素 の タグ を つけ て 表現 する ほか に 、 あ えて q 要 素 の 
タグ を つけ ず に 自分 で 「 」 や その 他 の 引用 符 を つけ て 示す こと も 認め られ て いま す 。 日 本 語 の 場 
合 は 、 原 稿 の テキ スト の 一 部 と し て 「 」 を 含ん で いる の が 一 般 的 で す の で 、 特 に q 要 素 は 使わ な 
いで 元 の 原稿 その まま に し て お いて も まっ た く 問 題 は あり ませ ん 。 











0 ア 6 








01 <Pp> 

02 アイ ヌ 民 族 最後 の 狩人 と 呼ば れる 姉崎 氏 に よる と <q> 空 の ペッ ト ボ トル を 押し て 出る 音 を クマ は 
03 嫌い ます </q> と の こと だ 。 

04 </P> 








01 <P> 

02 アイ ヌ 民 族 最後 の 狩人 と 呼ば れる 姉崎 氏 に よる と 「 空 の ペッ ト ボ トル を 押し て 出る 音 を クマ は 嫌い 
03 ます 」 と の こと だ 。 

04 </p> 




















イン ライ ン の 引用 文 は 、 引 用 符 を と っ て <q> 一 </q> で 囲っ て も 、q 要 素 に せ ず に 原稿 その まま に し て お いて も OK 


cite 要 素 は 、 そ の 部 分 が (引用 文 や 話題 と し て 触れ た ) 作品 の タイ ドル で ある こと を 示す 要素 で す 。 
この 要素 は 、 人 名 に 対し て は 使用 で きま せん 。 書籍 や 論文 、 詩 、 エ ッ セ イ 、 映 画 、 演 劇 、 テ レビ 
番組 、 歌 、 楽 譜 、 芸 術 作品 、 ゲ ー ム な どの タイ トル に 対し て 使用 され ます 。 


code 要 素 は 、 そ の 部 分 が ソース コー ド で ある こと を 示す 要素 で す 。 ソ ー ス コー ド 中 の 改行 や イン 
デン ト な ど を その まま 表示 させ た い 場 合 に は 、 ブ ロッ クレ ベル 要素 で ある pre 要素 の 内 部 で code 
要素 を 使用 し て くだ さい 。 





01 <pre><code>body { 

02 background-image: ur1(photo.Jp9): 
03 background-repeat: repeat: 

04 }</code> く /pre> 








CSS の ソー スコ ー ド を コン テン ツ と し て 掲載 する 場合 の code 要素 の 使用 例 。 ソ ー ス コー ド 中 の 改行 や イン デン ト を その まま 再現 
し た い 場 合 は 、pre 要素 の 内 部 で 使用 する 


small 要 素 は 、 一 般 に 小さ な 文字 で 掲載 され る 部 分 (著作 権 表示 ・ 注 意 書 き ・ 免責 事項 の よう な 付 
帯 情報 的 な 部 分 ) で ある こと を 示す 要素 で す 。 元 々 は フォ ント サイ ズ を 小さ くし て 表示 させ る た め 
の 要素 で し た が 、HTML5 か ら その よう な 意味 に 変更 され まし た 。 





01 <Pp> 
02 <small>Copyr1ght &copy: 2012 〇 O 〇 , Inc. A11 rights reserved.</sma11> 
03 </p> 


small 要素 の 使用 例 。「&copy :」 部 分 は 「@] の よう に 表示 され る 











span 要 系 は 、div 要 素 の イン ライ ン 版 で 、 そ の 範囲 が イン ライ ン 要 素 で ある こと だ け を 示し ます 。 
ほか の イン ライ ン 要 素 の 中 に ふさ わし いも の が な いよ うな 場合 に 使用 し ます 。 


CaAPTE を て テキ スト 








ぁ 従来 の イン ライ ン 要 素 に 該当 する 要素 (2) Irrursl 


次 に 、 あ まり 多く は 使用 され な い イ ン 
ライ ン 要 素 を 見 て いき まし ょ う 。 





























HTML5 の テキ スト 関連 要素 の うち 、 そ れ ほ ど 頻 繁 に は 使用 され な い イ 
ン ラ イン 要素 


abbr 要 素 は 、 そ の 部 分 が 略語 (abbreviation) で ある こと を 示す 要素 で す 。 そ の 略語 が 何 の 略 で あ 
る か を 示し た い 場 合 は 、title 属性 の 値 と し て 「 省 略し て いな い 状 態 の 言葉 ] を 指定 する こと が で き 
ます 。 


dfn 要 素 は 、 そ の 部 分 が 定義 (defining) 対象 の 用 語 で ある こと を 示す 要素 で す 。「 〇 〇 〇 と は 、 へ 
へ へ へ へ の こと で す 」 と いっ た 何 か を 定義 する 文章 の 、 〇 〇 〇 の 部 分 に 対し て 使用 し ます 。 


sup 要 素 は その 部 分 が 上 付き 文字 (superscrip や ) で ある こと を 、sub 要 素 は その 部 分 が 下 付き 文字 
(subscript) で ある こと を 示す 要素 で す 。 一 般 的 な ブラ ウザ で は 、 そ れ ぞ れ 上 付き 文字 ・ 下 付き 文 
字 と し て 表示 され ます 。 








01 <p> 
02 二酸化 炭素 は C0 く <sub>2</sub> で す 。 
03 </p> 


sub 要 素 の 使用 例 二酸化 炭素 は COz で す 。 











sub 要 素 の 表示 例 


i 要 素 は 、 も と も と は 単純 に 要素 内 容 を イタ リッ ク 体 (italic) で 表示 させ る た め の 要 素 で し た 。 し か 
し HTML5 か ら は 、 生 物 学 に お ける 「 学 名 ] や 、 英 語 に お ける 「 船 の 名 前 ] や 「 外 国語 ] な どの よ 


うに 、 慣 習 と し て 通常 は イタ リッ ク で 表記 する 部 分 に 使用 する 要素 と な り まし た 。 








b 要 素 は 、 も と も と は 単純 に 要素 内 容 を 太字 (bold) で 表示 させ る た め の 要 素 で し た 。 し か し 
HTML5 か ら は 、 文 書 中 の 「 キ ー ワ ー ド 」 を 目立た せ た い 場合 や 、 製 品 レ ビュ ー 中 の 「 製 品名 ] な 
どの よう な 一 般 に 太字 で 掲載 され る よう な 部 分 に 使用 する 要素 と な り ま し た 。 こ の タグ を つけ た か 
ら と いっ て 、 特 に 重要 性 な ど を 表す わけ で は な い 点 に 注意 し て くだ さい 。 


mark 要 素 は 、 そ の 部 分 が ユー ザー に 注目 し て ほし い 部 分 で ある こと を 示す 要素 で す 。 た と えば 、 
ある 引用 文 が あっ て 、 元 の テキ スト で は 特に タグ は つけ られ て いな いけ れ ど も 読ん で いる 人 に 注目 
し て ほし い 部 分 を 示す 場合 や 、 検 索 結果 の 一 覧 表示 で 検索 に 使用 され た キー ワー ド 部 分 を ハイ ラ 
イト 表示 し た い 場 合 な ど に 使用 され ます 。 


リン グ HrMusw| 


さて 次 は 、HTML5 より 前 の HTML で は イン ライ ン 要 素 に 分 類 さ れ て いた 、 リ ンク を 作成 する た め 
の 要素 で ある a 要 素 を 紹介 し まし ょ う 。 ち な み に a 要 素 の 「a] は 、「(hypertext) anchor] の 「a] 
で す 。 

テキ スト の 一 部 を リン ク に する に は 、 そ の 範囲 を a 要 素 の タグ で 囲っ て 、 リ ンク 先 の URL を href 
属性 (href は hypertext reference の 略 ) で 指定 する だ け で す 。 た と えば 、 次 の テキ スト の 「 サ ンプ ル ]」 
と いう 部 分 を 「http://Www.example.com/] に リン ク さ せ た い 場合 は 、 次 の よう に 記述 し ます 。 





01 <p> 
02 わか りや すい <a href="http://www.example.com/"> サ ンプ ル </a> も あり ます 。 
03 </p> 


「 サ ンプ ル 」 と いう テキ スト を リン ク に する と き の 記 述 例 








この a 要 素 は 、HTML5 より 前 は イン ライ ン 要 素 と し て 分 類 さ れ て いた た め に 、 内 容 と し て 入れ る 
こと が で きる の は イン ライ ン 要 素 だ け で し た 。 し か し 、HTML5 か ら は 、 そ の ag 要素 の 親 要素 に 入 
れ ら れる 要素 で あれ ば 、 ど の 要素 で も 入れ られ る よう に 仕様 変更 され て いま す 。 つ まり 、a 要 素 を 
抜き で 考え て そこ に あっ て も 問題 の な い 要 素 で あれ ば 、 ど の 要素 で も <a href=" 〇 〇 〇 "> て </ 
a> で 囲っ て リン ク に で きる と いう こと で す 。 し た が っ て 、h1 一 h6 要 素 や div 要 素 、ul 要 素 と いっ 
た ブロ ッ ク レ ベル 要素 を a 要 素 の 中 に 入れ て も 、HTML5 で は 文法 エラ ー に は な り ま せん 。 

た だ し 、 そ こ に は 例外 も あり ます 。a 要 素 の 内 部 に は 、 ほ か の a 要 素 お よび イン タラ クティ ブ コ ン 
テン ツ に 分 類 さ れる 要素 (フォ ー ム で 使用 され る 部 品 な ど ) は 一 切 入 れ ら れ な いこ と に な っ て いま 
す 。 こ れ は つま り 、 リ ンク の 中 に 別 の リン ク が 含ま れ て いた り 、 リ ンク の 中 に テキ スト 入力 欄 や メ 
ニュ ー や ボタ ン な ど が あっ て は いけ な いと いう こと を 意味 し て いま す 。 


a 要 素 に は 、href 属 性 の ほか に target 属 性 も 指定 で きま す 。target 属 性 を 使用 する と 、 リ ンク 先 を 
新しい ウィ ンド ウ や タブ に 表示 させ る こと な ど が 可能 に な り ま す 。 








a 要 素 に 指定 で きる 属性 


・href=" リ ンク 先 の URL" 
この 属性 を 指定 する こと で a 要 素 は リン ク に な り ま す 。 
値 に は リン ク 先 の URL を 指定 し ます 。 


・target=" リ ンク 先 を 表示 させ る ウィ ンド ウ ま た は タブ 名 " 
リン ク 先 を 表示 させ る ウィ ンド ウ ま た は タブ を 指定 する 場合 に 使用 し ます 。 
値 に は ウィ ンド ウ ま た は タブ の 名 前 が 指定 で き 、 指 定 し た 名 前 の も の が すでに あれ ば そこ に 表 
示し 、 な けれ ば 新しい ウィ ンド ウ ま た は タブ に 表示 され ます 。 ま た 、 値 に は アン ダー スコ ア で 
は じ ま る 特別 な キー ワー ド も 指定 で きま す 。 
「_b1ank」 を 指定 する と 、 リ ンク 先 は 新しい ウィ ンド ウ ま た は タブ に 表示 され ます 。 
「_se1f」 を 指定 する と 、 リ ンク 先 は 現在 の ウィ ンド ウ ま た は タブ に 表示 され ます 。 
「_parent」 は Chapter 10 で 登場 する 1frame 要 素 を 使っ て いて 親 ペ ー ジ が ある 場合 に 使用 し 、 
親 と な っ て いる ウィ ンド ウ ま た は タブ が ある 場合 は そこ へ 、 な けれ ば 現在 の ウィ ンド ウ ま た は 
タブ に 表示 させ ます 。 


ビリ 
ゴ ヨ 4 ュ dy アロ ュ 


CO と り ハ びび / 


ペー ジ 内 の 特定 の 場所 に リン ク す る 


href 属 性 で 指定 する URL の 最後 に 半角 の 「#| を つけ 、 そ の あと に id 属性 で 指定 し て ある 値 を 加え る 
こと で 、 指 定 し た ペー ジ 内 の その id 属性 が 指定 され て いる 要素 の 位置 へ と リン ク さ せる こと が で きま 


す ( リ ンク 先 が あ る 程度 長い ペー ジ の 場合 は 、 そ の 要素 が 表示 され る と ころ まで スク ロー ル し た 状態 で 
表示 され ます )。 





リン ク 元 の ソー スコ ー ド 


く D> 


く a href="http://www.example.com/index.htm]#section2"> 第 2 節 く </a> へ 。 
く /Pp> 


リン ク 先 (http://www.example.com/index.html) の ソー スコ ー ド 
2 く h1 id="section2"> 

第 2 節 ふざけ た サン プル の 本 は 信用 する な 
1 </h1> 











ペー ジ 内 の 特定 の 要素 の 位置 に リン ク さ せ た い 場合 は 、 リ ンク 元 の URL の 最後 に 「#] を つけ 、 リ ンク 先 の 要素 の id 属性 の 


値 を 指定 する 








し 馬 ルビ HTMrs 新 | 


イン ライ ン 要 素 の 最後 は 、 構造 が ちょ っ と 複雑 な ruby 要素 で す 。ruby と は 日 本 語 の ルビ の こと で 、 
この 要素 を 使う こと で 任意 の テキ スト に ぶり が な (ルビ ) を ふる こと が で きま す 。 


ある 部 分 に 単純 に ふり が な を つけ る だ け な ら 、 ふ り が な を ふる テキ スト を <ruby> 一 </ruby> で 
囲い 、 終 了 タ グ </ruby> の 直前 に 必要 素 の 内 容 と し て ふり が な の テキ スト を 入る だ け で OK で す 。 
ちな み に 、「rt] は 「ruby text] の 略 で す 。 


sample/chapter-05/lecture-5-1/01.html 





01 <p> 
02 自転 車 で <ruby> 濃 昼 <rt> ご きび る </rt></ruby> 海 水浴 場 に 行き まし た 。 
03 </p> 





テキ スト の 上 に 表示 させ る ふり が な は rt 要素 に 入れ て 、 ふ り が な を ふる テキ スト の 直後 に 配置 。 そ れ ら 全体 を ruby 要 素 に する と 、 
ふり が な が 表示 され る 





自転 車 で 濃 昼 海 水浴 場 に 
行き ま 7 だ 8 








上 の ソー スコ ー ド の 表示 例 


し か し 、 現 時 点 で は すべ て の ブラ ウザ が ruby 要素 に 対応 し て いる わけ で は あり ませ ん (Google 
Chrome、Safari、IE は 対応 し て いま す )。 た と えば 、Firefox 11 は ruby 要 素 に 未 対応 で 、 上 の ソ 
ー ス コー ド は 次 の よう に 表示 され ます 。 


自転 車 で 濃 昼 ご きび る 海 
水浴 場 に 行き まし た 。 








上 の ソー スコ ー ド を Firefox 11 で 表示 させ た と ころ 。 ル ビ も 
普通 の テキ スト と し て 表示 され る 


CaAPTE を で て テキ スト 








これ で は 未 対応 ブラ ウザ で は 、 内 容 に よっ て は 意味 不明 の テキ スト に な っ て し まう こと も ある か も 
し れ ま せん 。 そこ で 未 対応 の ブラ ウザ で 見 た と き に は 「 濃 昼 ど ご きび る 」 で は な く 「 濃 昼 ( ご きび る )」 
の よう に カッ コ つ き で 表示 させ る こと も で きる よう に な っ て いま す 。 そ の 際 に 使用 する の が rp 要 
素 で す (「rp] は 「ruby parentheses] の 略 で 、parentheses は 丸 カ ッ コ を 意味 し ます )。 


未 対応 の ブラ ウザ で ふり が な の 前 後に カッ コ が 表示 され る よう に する わけ で すか ら 、 開 き カ ッ コ の 
rp 要素 は ふり が な の 直前 に 、 閉 じ カ ッ コ の rp 要素 は ふり が な の 直後 に な けれ ば な り ま せん 。『rp 要 
素 の 要素 内 容 と し て は 、 未 対応 の ブラ ウザ で ふり が な (つま り r 要 素 ) の 前 後に 表示 させ た い 開 き カ 
ッ コ と 閉じ カッ コ を それ ぞ れ 入れ ます 。 

た と えば 、 さ き ほ どの ソー スコ ー ド を 次 の よう に 変更 する と 、 未 対応 の ブラ ウザ で は ふり が な が カ 
ッ コ 付き で 表示 され る よう に な り ま す 。 な お 、ruby 要素 に 対応 し て いる ブラ ウザ で は 、rp 要 素 の 
内 容 は 無視 され て 表示 され ませ ん 。 





sample/chapter-05/lecture-5-1/02.html 


01 <ruby> 濃 昼 く <rp> (</rp> く <rt> ご きび る </rt>< く rp>) </rp> く </ ruby> 








く rp> (</rp> 
<rt> ご きび る </rt> 


く rp>) </rp> 
く /ruby> 














自転 車 で 濃 昼 海水 浴場 に 
行き まし た 。 


自転 車 で 濃 昼 (ご きび 
る ) 海水 浴場 に 行き まし 
だ 








上 の ソー スコ ー ド の Google Chrome で の 表示 例 。rp 要素 は 上 の ソー スコ ー ド の Firefox 11 で の 表示 例 。 未 対応 の ブラ ウ 
無視 され 、( ) は 表示 され な い ザ で は テキ スト は その まま 表示 され る の で 、 こ の よう に な る 








実は ruby 要素 内 に は 、「 ふ り が な を ふる テキ スト rp 要素 +rt 要 素 +rp 要素 ] を 複数 人 れ ら れる 仕 
様 と な っ て いま す 。 つ まり 、 次 の よう な ふり が な の ふ リ 方 も 可能 で す 。 





sample/chapter-05/lecture-5-1/03.html 


01 <ruby> 濃 <rp> (</rp><rt> ご き </rt><rp>) </rp> 昼 く rp> (</rp><rt> ぴ る </rt><rp>) 
く /rp></ruby> 


2 





01 <ruby> 
02 濃 
03 <rp> (</rp> 
04 <rt> ご きく </rt> 
05 <rp>) </rp> 
06 昼 
07 <rp> (</rp> 
08 <rt> び る </rt> 
09 <rp>) </rp> 
10 </ruby> 


























ンプ 


<) = る 」 Gy 


自転 車 で 濃 昼 海水 浴場 に 自転 車 で 濃 (ご き ) 昼 











行き まし た 。 (びる ) 海水 浴場 に 行き 
' まし た 。 
上 の ソー スコ ー ド の Google Chrome で の 表示 例 上 の ソー スコ ー ド の Firefox 11 で の 表示 例 


CaAPTE ょ て テキ スト 








と 色 の 値 の 指定 形式 


ここ まで の CSS の 例 で は 、 色 は black、 white、 red の よう な 色 の 名 前 で 指定 し て きま し た 。 し か し 、 
CSS に は ほか に も いく つか の 色 の 指定 方 法 が 用 意 さ れ て いま す 。 


@「#ff0000」 形式 

記号 # に 続け て 、RGB の Red、Green、Blue それ ぞ れ の 値 を 2 桁 ず つの 16 進 数 ( 計 6 桁 ) で 指定 す 
る 形式 で す 。 た と えば 、 赤 の RGB 値 は 10 進 数 だ と 「Red=255、Green=0、Blue=0] で す 。255 
は 2 桁 の 16 進数 だ と f 人 ft、0 は 00 と な り ま す の で 、 こ の 形式 だ と 赤 は #ff0000 と な り ま す 。 こ の 形 
式 は Web ペ ー ジ の 色 指定 で は も っ と も 一 般 的 な 方 法 で す の で 、 多 く の グ ラフ ィ ッ ク 系 ソフ ト や ツ 
ー ル な ど は この 形式 で の 色 の 値 が 分 か る よう に 作ら れ て いま す 。 


@ 「 盾 00」 形式 

記号 # に 続け て 、RGB の Red、Green、Blue それ ぞ れ の 値 を 1 桁 ず つの 16 進 数 ( 計 3 桁 ) で 指定 す 
る 形式 で す 。 こ の 場合 の 1 桁 ず つの 16 進 数 は その まま 色 の 値 と し て 使用 され る の で は な く 、 各 桁 
の 数 字 の 直後 に 同じ 数 字 を も う 1 つ ずつ 追加 し た 値 に 変換 され て 使用 され ます 。 つ まり 、#123 と 
指定 され た ら #112233、#f00 と 指定 され た ら #ff0000 が 指定 され た こと に な る わけ で す 。 そ の 
た め 、 こ の 形式 で 表せ る の は 、6 桁 の RGB の 各 2 桁 びそ れ ぞ れ 同 じ 数 字 に な っ て いる 色 *" だ け で す 。 


@ 「rgb (255, 0, 0)」 形式 
16 進 数 を 使わ ず に 、RGB の 各 値 を シン プル に 10 進 数 で 指定 する 形式 で す 。rgb( ) の カッ コ 内 に 、 
RGB 値 を カン マ で 区 切っ て 順に 入れ る だ け で OK で す 。 


※7 : いわ ゆる Web セ ー フ カラ ー は 、 す べ て 3 桁 の 16 進 数 形式 で あら わす こと が で きま す 。Web セー フカ ラー と は 、256 色 し か 表 
現 で き な い パソ コン で 機種 に よる 色 の 違い を 生じ させ な いた め に 使用 され て いた 色 の こと で 、 具 体 的 に は RGB の 各 値 を 16 進 
数 の 00, 33, 66, 99, cc, ff の 組み 合わ せ だ け で 作成 し た 216 色 の こと で す 。 





o%s 





CAPTE ょ た て テキ スト 


@ 「rgba (255, 0, 0, 0.5) 」 形式 IcsS3 新 | 
rgb( ) の 形式 に 選 明 訟 を 示す alpha の 値 を 追加 し た 形式 で す 。rgba( ) の カッ コ 内 に 、RGB 値 に 
続け て 透明 度 も 指定 し ます 。 透 明度 は 、0 一 1 の 実数 で あら わし 、0 は 完全 に 透明 で 、1 は 完全 に 不 
透明 と な り ま す 。 た と えば 、 半 透明 の 赤 は rgba(255, 0, 0, 0.5) と な り ます 。 





色 の 名 前 | #ff0000 形 式 








black #000000 


#f00 形式 





rgb (255.0.,0) 形式 





rgb(0,0,0) 














rgba (255,0.0,0.5) 形式 






rgba(0,.0,0,1) 








gray #808080 


3 ーー 


rgb(128,128,128) 


rgba(128,128,128,1) 








































































lsilver #cOcOc0 っ rgb(192.192,192) rgba(192,192,192,1 ) 
ーー 十 
|white #ff イ イイ f 邊 #f イ ff rgb(255,255,255) rgba(255,255,255,1) 
| 貞 帳 
fuchsia |#ff00ff #f0f rgb(255,0,255 ) rgba(255,0.255,1 ) 
red #ff0000 #f00 rgb(255,0.0) rgba(255,0,0,1) 
yellow #ffff00 #ffO rgb(255,255,0) rgba(255,255,0,1) 
11ime #00ff00 #0f0 rgb(0,255,0) rgba(0,255,0,1) 
aqua #00ffff #0ff rgb(0,255,255 ) rgba(0.255,255,1) 
blue #0000ff #00f rgb(0,0.255) rgba(0,.0,255,1) 
テー aa 
purple #800080 8 | rgb(128,0,128) rgba(128,0,128,1) 
ャ ーー 
maroon |#800000 ン rgb(128,0,0) rgba(128,.0.0.1) 
+ー ンー 
olive #808000 rgb(128,128,0) rgba(128,128,0,1) 
ャ ー 計 ョ 1 
ーー 
green #008000 ピー rgb(0,128,0) rgba(0,128.0,1) 





teal #008080 





際 


rgb(0,128,128) 


rgba(0,128,128,1 ) 














navy #000080 | 4 rgb(0.0,128) 


rgba(0.0,128,1 ) 











CSS で 使用 で きる 基本 的 な 色 の 名 前 と 、 そ れ に 対応 する 各 形 式 の 色 の 値 






ぁ ぁ 色 に 関連 する プロ パテ ィ 


ここ で 色 に 関連 する プロ パテ ィ を 2 つ 紹 介し て お きま す 。1 つ は Chapter 2 で も 使用 し た color プ ロ 
パテ ィ で 、 も う 1 つ は 要素 全体 の 透明 度 を 指定 する た め の opacity プロ パテ ィ で す 。 


ゆあ color プ ロ パ ティ 

color プ ロ パ ティ は 、 テ キス ト の 色 を 指定 する た め の プ ロ パ ティ で す 。 こ の プロ パテ ィ で 指定 し て 
いる 色 を 初期 値 と する プロ パテ ィ が いく つか あり ます (た と えば 、 テ キス ト の 影 の 色 は この 値 が 初 
期 値 と な り ま す )。 指定 で きる 値 は 次 の 通り で す 。 


color に 指定 で きる 値 





Wopacity プロ パテ ィ 
opacity プロ パテ ィ を 使用 する と 背景 も 含ん だ 要素 全体 の 透明 度 を 指定 する こと が で きま す 。 次 の 
値 が 指定 で き 、 初 期 値 は 1 (不透明 ) と な っ て いま す 。 


opacity に 指定 で きる 値 


以下 は 、opacity プロ パテ ィ の 使用 例 で す 。 

半 透 明 で ある こと が 分 か りや すい よう に 、body 要 素 に 背景 画像 を 指定 し た 状態 で 、h1 要 素 に 
「opacity: 0.5:] を 指定 し て いま す 。 文字 色 は 白 で 背景 色 は 黒 に し て いま す が 、 文 字 色 も 背景 
色 も 半 透 明 に な っ て いる こと が 確認 で きま す 。 サ ンプ ルフ ァイル を 用 意 し て あり ます の で 、 
opacity プロ パテ ィ の 値 を 書き 換え て 、 透 明度 が 変化 する こと を 確認 し て みて くだ さい 。 





HTML sample/chapter-05/lecture-5-2/01.html 


く body> 
く h1> 


この 要素 全体 の 透明 度 を CSS の opac1ty プロ パテ ィ で 指定 し て いま す 。 
く </h1> 
く /body> 











メイ ョ 








CSS sample/chapter-05/lecture-5-2/01-opacity.css 





01 body { 

02 background-1mage: ur1(1images/photo.jpg): 
03 } 

04 h1 { 

05 color: white: 

06 background-color: black: 

07 Opacity: 0.5: 

08 } 

















h1 要素 に 「opacity: 0.5:」 を 指定 











opacity プロ パテ ィ の 値 を 0.2 に 変え た 状態 


066 CaAPrek て テキ スト 








と で“ う 


テキ スト 関連 の プロ パテ ィ 


し ecTY 


ここ か ら テ キス ト に 対し て 指定 で きる CSS プロ パテ ィ の 説明 を し て いき ます 。 プ ロ パ ティ で 
使用 する 値 の 説明 と 、 実 用 に 際 し て 気 を つけ な けれ ば いけ な いこ と を まとめ て いま す 。 


ぁみ > フォ ント 関連 プロ パテ ィ 


続け て 、 テ キス ト に 関連 する CSS の プロ パテ ィ を 紹介 し ます 。 ま ず は テキ スト 部 分 の フォ ント を 
制御 よる プロ パテ ィ ( フ ォ ン ト サ イ ズ ・ 行 間 ・ フ ォ ン ト の 種類 ・ 太 字 ・ 斜 体 ) か ら で す 。 


5 
* 
っ 3 
4 
る 


o%z 


ゆ font-size プロ パテ ィ 

Chapter 2 で は 、font-size プロ パテ ィ で h1 要素 と p 要 素 の フォ ント サイ ズ を 指定 し まし た 。 そ こ 
で は 数 値 に 「px] と いう 単位 を つけ て ピク セル 数 で フォ ント サイ ズ を 指定 し まし た が 、 実 際 に は 
次 の よう な さま ざま な 値 が 指定 で きま す ( 初 期 値 は 「nedium] で 、 ブ ラウ ザ で 設定 し て いる 標準 
フォ ント の サイ ズ と な り ま す )。 


font-size に 指定 で きる 値 


・ 単 位 つ き の 実 数 
フォ ント サイ ズ を 単位 つき の 実数 (16px な ど ) で 指定 し ます 。 


ハリ ンション / 
親 要素 の フォ ント サイ ズ に 対す る パー セン テー ジ で 指定 し ます (150% の よう に 、 実 数 の 直後 に 
半角 の 「%] を つけ て 指定 し ます )。 


・XX-Smal]1 , xX-smal] , smal]1, medium, 1arge, X-1arge, XX-1arge 
7 種類 の キー ワー ド で 指定 で きま す 。 
xx-smal1 が も っ と も 小さ く 、medium は 普通 の サイ ズ で 初期 値 、xx-1arge が も っ と も 大 き 
な サイ ズ と な り ま す ( 実 際 に 表示 され る サイ ズ は ブラ ウザ に よっ て 異な り ま す )。 


・smaller, ]arger 
親 要素 の フォ ント サイ ズ に 対し て 、 一 段階 小さ く (smal1ler)、 ま た は 大 きく (1arger) し ます 。 








o%@ 





ゆ CSS で 使用 する 単位 に つい て 


さて Tont-sizet 
が 指定 で きる と 書か れ て いま す が 、CSS PX | ピク セル に 





で よく 使わ れる 主 な 単位 を ここ で 紹介 し |PE | ポイ ント 
て お きま し ょ う 。 回 題 エン テ メ ター トル 上 
mm ミリ メー トル | 
|em | その 要素 の font-size プロ パテ ィ の 値 を 1 と する 単位 | 
CSS で 使用 で きる 主 な 単位 





Chapter 2 で すでに 使用 し まし た が 、px は 画面 の 1 ピク セル を 1 と する 単位 で す 。pt は 、 ワ ー プ ロ 
な ど で フ ォ ン ト サ イ ズ を 指定 する と き に 使わ れる 単位 の ポイ ント (1/72 イ ンチ ) と 同じ で す 。cm と 
mm は 主 に 印刷 用 に 用 意 さ れ て いま す (画面 表示 用 の CSS で は 基本 的 に 使用 され ませ ん )。 


さて 、 最後 の em (エム と 読み ます ) で す が 、 こ の 単位 は font-size プロ パテ ィ 以 外 に 使用 し た 場合 と 、 
font-size プロ パテ ィ に 使用 し た 場合 と で 意味 が 変わ っ て きま す 。font-size プロ パテ ィ 以 外 に 使用 
し た 場合 、 こ の 単位 は その 要素 に 指定 され て いる font-size プロ パテ ィ の 値 (指定 され て いな けれ ば 
初期 値 medium の 大 き さ ) を 1 と する 単位 と な り ま す 。 font-size プロ パテ ィ に 使用 し た 場合 は 、 親 
要素 の font-size プロ パテ ィ の 値 を 1 と する 単位 し な り ます 。 た と えば 、 親 要素 の font-size プロ パ 
ティ の 値 が 12px の 場合 、「font-s1ze: 1.5em:] と 指定 する と フォ ント サイ ズ は 18 ピ クセ ル 
( 親 要素 の 1.5 倍 ) に な る と いう こと で す 。 em は 比較 的 よく 使用 され る 単位 で す の で 、 し っ か り と 
覚え て お きま し ょ う 。 


ぶ line-height プロ パテ ィ 

次 に 紹介 する の は 、 行 間 ( 行 の 高 さ ) を 指定 する プロ パテ ィ の line-height (ライ ン ハ イト と 読み ます ) 
で す 。 これ も Chapter 2 で 使用 し た プロ パテ ィ の 1 つ で す 。 次 の 値 が 指定 で きま す ( 初 期 値 は 
「norma1」 で す )。 


line-height に 指定 で きる 値 


・ 実数 
行間 を 単位 を つけ な い 実 数 (1 .5 な ど ) で 指定 し ます 。 
行間 は 、 こ こ で 指定 し た 実数 と フォ ント サイ ズ を 掛け た 高 さ と な り ま す 。 


・ 単 位 つ き の 実 数 
行間 を 単位 つき の 実数 (24px な ど ) で 指定 し ます 。 


0 ラー 
行間 を フォ ント サイ ズ に 対す る パー セン テー ジ (150% など) で 指定 し ます 。 


・normal 
ブラ ウザ 側 で 妥当 だ と 判断 する 行間 に 設定 し ます (ブラ ウザ に よっ て 表示 結果 は 異な り ます )。 


PTE を で テキ スト 








指定 で きる 値 の 中 に 「 単 位 を つけ な い 実 数 ] が 含ま れ て いま す 。 フ ォ ン ト サ イ ズ を 基準 に し て その 
「 何 倍 」 と 指定 し た い の で あれ ば 、em を 使う こと も パー セン テー ジ を 使う こと も で きる の に 、 な ぜ 
わざ わざ この 値 が 用 意 さ れ て いる の で し ょ うか ? 

実は 、 こ れ ら の 指定 方 法 の あい だ に は 、 大 き な 違 い が あ り ま す 。 ど の 方 法 で 「 何 倍 ] と 指定 し て も 
line-height プロ パテ ィ を 指定 し た 要素 自体 に は な ん ら 違 い は 現れ な い の で す が 、 そ の 内 部 に 含ま 
れ て いる 要素 に は 大 き な 違 い が 生 じ る の で す 。 


CSS の プロ パテ ィ の 中 に は 、 表 示 指 定 を その 要素 だ け に 適用 する も の と 、 そ の 内 部 に 含ま れる 要 
素 に も 適用 する も の と が あり ます 。 た と えば 、font-size は 内 部 の 要素 に も 適用 され ます が 、 痛 
景 関連 の プロ パテ ィ は 内 部 の 要素 に は 適用 され ませ ん 。]ine-height は 、 内 部 の 要素 に も 適用 
され る プロ パテ ィ で す 。 


CSS で は 、 指 定 され た 値 を この よう に 内 部 の 要素 に 適用 する 場合 、 指 定 さ れ た 値 を その まま 適用 
する の で は な く 、 計 算 結 果 の 値 を 適用 する こと に な っ て いま す 。 た と えば 、 フ ォ ン ト サ イ ズ が 10 
ピク セル の 要素 に 対し て 「11ne-height: 1.5em:] や 「]ine-height: 150%:」 を 指定 し 
た 場合 、 内 部 の 要素 に 適用 され る の は 「1.5em] や 「150%」 で は な く 、 計 算 結 果 の 「15px」 な 
の で す 。 

この 場合 で も 、 内 部 の 要素 の フォ ント サイ ズ が すべ て 同じ で あれ ば 、 特 に 影響 は あり ませ ん 。 し か 
し 、 内 部 に フォ ント サイ ズ が 30 ピク セル の テキ スト が 入っ て いた りす る と 、 行 間 15 ピ クセ ル に は 
収まり きら ず に は み 出 し て (ほか の 行 と 重なっ て ) し まう こと に な り ま す 。 


11ine-height に 指定 で きる 「 単 位 を つけ な い 実 数 ] は 、 そ の 問題 を 解決 する た め に 用 意 さ れ た 
も の で す 。 

実は 、[ 単 位 を つけ な い 実 数 ] を 指定 し た 場合 に 限り 、 計 算 結果 の 値 で は な く 、 そ の 「 単 位 を つけ 
な い 実 数 ] を その まま 内 部 の 要素 に も 適用 する こと に な っ て いま す 。 こ うす る こと で 、 内 部 に 30 
ピク セル の テキ スト が 入っ て いて も 、 行 間 は 「15px] で は な く 「45px] に な り 、 テ キス ト が 行 を 
は み 出 すこ と は な く な る と いう わけ で す 。 こ の よう な 理由 か ら 、11ne-height に は 多く の 場合 「 単 
位 を つけ な い 実 数 ] が 指定 され ます 。 





HTML sample/chapter-05/lecture-5-3/01.html 





01 <body> 


02 <h1> 

03 これ は h1 要素 で す 。 フ ォ ン ト サ イ ズ は 30 ピク セル で す 。 | 
04 </h1> 

05 <P> 

06 これ は p 要 系 で す 。 ・・・ 中 略 ・・・ し て いま す 。 | 
07 </p> 


08 </body> 
























o9o 





CSS sample/chapter-05/lecture-5-3/01-line-height.css 


body { 
font-s1ize: 10Dx: 
]ine-height: 150%: 
4 1 
h1 { 
font-size: 30px: 








body 要素 に 「11ne-height: 150%:」 を 指定 


を っ G 任 G 四 





を = で G 衣 の 傘 


あと ルネ ン これ は h1 要素 で す 。 フ ォ ン 


これ は D 要 素 で す 。 こ の 生 素 に 千 し て 表示 提 二 は し て いま せん 。 た だ し 、booy 要 素 で ト サ イ ズ は 30 ピク セル で 


フォ ント サイ ズ を 10 ピ クセ ル に 指定 し て いま す 。 こ れ に は p 要 素 で す 。 こ の 要素 に 対し 
て 表示 指定 は し て いま せん 。 た だ し 、pocy 本 素 で フォ ント サイ ズ を 10 ビ クセ ル に 指 
定 し て いま す 。 Oo 





これ は p 要 素 で す 。 こ の 酸素 に 
フォ ント サイ ズ を 10 ピ クセ, 







て 表示 指定 は し て いま せん 。 5 DOGy 大 で フォ ント サイ ズ を 10 ビ クセ に 


定 し て いま す 。 




















上 の ソー スコ ー ド を ブラ ウザ で 表示 させ る と この よう に な る 1ine-height の 値 を 「150%] か ら 「1.5] へ と 変更 する と 
文字 が 重 な ら な く な る 


CO た りん NM/ の 


値 の 継承 に つい て 


CSS の プロ パテ ィ の 中 に は 、 指 定 さ れ た 値 を その 内 部 に 含ま れる 要素 に も 適用 する も の と し な いも の 
が ある と 書き まし た 。 た と えば 、body 要 素 に font-size プロ パテ ィ を 指定 する と 、 その 値 は bogy 要素 
の 中 に 含ま れる p 要 素 な ど に も 適用 され ます 。 し か し 、body 要素 に background-image プロ パテ ィ で 
背景 画像 を 指定 し て も 、 内 部 の p 要 素 な ど に は 適用 され ませ ん 。 


この よう に 、 指 定 され た 値 を 内 部 の 要素 に も 継承 させ る か どう か は 、 通 常 は 特に 意識 し な く て も その 
プロ パテ ィ の 種類 に 応じ て うま く 機 能 す る よう に 作ら れ て いま す 。 そ し て 、 親 要素 の 値 を 継承 し な い 
プロ パテ ィ で あっ て も 、 値 に 「inherit] と 指定 する だ け で 強制 的 に 親 要素 の 値 を 継承 させ る こと が 
可能 と な っ て いま す 。 た だ し 、Internet Explorer 7 以前 の バー ジョ ン で は 「inherit] に 未 対応 で す 
の で 注意 し て くだ さい 。 


な お 、「inherit] は CSS の すべ て の プロ パテ ィ で 使用 で きま す が 、 本 書 の 「 〇 〇 〇 に 指定 で きる 値 」 
と いう 部 分 で は 記載 を 省略 し て いま す 。 


し HAPTE ょ て テキ スト 





font-family プロ パテ ィ 

さて 、 次 も Chapter 2 で 使用 し た プロ パテ ィ の fontfamily で す 。 テ キス ト を 表示 させ る フォ ント の 
種類 を 指定 する た め の プ ロ パ ティ で 、 値 に は 次 の よう に フォ ント の 名 前 また は フォ ント の 種類 を あ 
ら わ す キ ー ワ ー ド が 指定 で きま す 。 初期 値 は ブラ ウザ で 設定 され て いる フォ ント と な り ま す 。 


font-family に 指定 で きる 値 


ーー 


ポッ プ 系 フォ ント 


す ト の 種類 





た だ し 、 閲 覧 者 の 環境 に 指定 し た フォ ント が イン スト ー ル され て いな い 場 合 に 備え て 、 カ ンマ (,) 
で 区 切っ て 複数 の 値 を 指定 し て お く こ と が で きま す 。 そ の 場合 は 、 よ り 前 に (左側 に ) 指定 され て 
いる フォ ント で 、 そ の 環境 で 利用 可能 な も の が 採用 され る こと に な り ま す 。 


フォ ント 名 の 中 に は 、 半 角 ス ペー ス や 数 字 、 記 号 な ど を 含む も の が あり ます 。 そ の よう な 名 前 を 指 
定 する 場合 に は 、 名 前 の 前 後に 引用 符 (また は ") を つけ て 名 前 が 間違い な く 認 識 さ れる よう に す 
る こと が 推奨 され て いま す ( 引 用 符 を つけ た りつ け な か っ た りす る より は 、 常 に つけ る こと に 決め 
て お いた 方 が より 安全 で す )。 た だ し 、 フ ォ ン ト の 種類 を あら わす 5 つの キー ワー ド に 関し て は 、 
引用 待 を つけ る と 認識 され な く な り ま す の で 注意 し て くだ さい 。 


sample/chapter-05/lecture-5-3/02-font-family.css 












01 body { 

02 font-family: "メイ リオ ",。 "Meiryo", "ヒラ ギ ノ 角 ゴ Pro M3". "Hiragino Kaku Gothic 
Pro"、 "MS P ゴ シッ ク ", "MS P Gothic", "0saka"。 sanSs-Serif: 

03 } 

font-family プロ パテ ィ の 使用 例 。 同じ フォ ント ファ ミリ ー を 日 本 語 と 英語 の 両方 で 指定 し て いる の は 古い ブラ ウザ に も 認識 させ る 

た め 











さて 、font-family プロ パテ ィ の 属性 の 解説 部 分 で も 触れ まし た が 、1 つ の フォ ント ファ ミリ ー の 中 
に ある bold の 書体 を 選択 する の が font-weight プロ パテ ィ で 、italic の 書体 を 選択 する の が font- 
style プロ パテ ィ で す 。 も し 、bold や italic の 専用 書体 が 用 意 さ れ て いな い フ ォ ン ト で あっ て も 、 一 
般 的 な ワー プロ な どの よう に 太字 や 斜体 で 表示 させ る こと が 可能 で す 。 で は 、 こ れ ら の 使い 方 を 順 


に 見 て いき まし ょ う 。 


ゆ font-weight プロ パテ ィ 
font-weight プロ パテ ィ に は 次 の 属性 が 指定 で きま す 。 初期 値 は 「norma1」 で す 。 


font-weight に 指定 で きる 値 


・100, 200, 300, 400, 500, 600, 700, 800, 900 
9 種類 の 数 値 で 指定 で きま す ( 実 際 に 表示 され る 太 さ は フォ ント の 種類 に よっ て 異な り ま す )。 
100 が も っ と も 細く 、400 が 標準 の 太 さ で 初期 値 、900 が 最も 太く な り ま す 。 


・bold 
その フォ ント の 一 般 的 な 太字 の 太 さ に し ます 。700 を 指定 し た 場合 と 同様 の 結果 と な り ま す 。 


・norma]l 
その フォ ント の 標準 の 太 さ に し ます 。400 を 指定 し た 場合 と 同様 の 結果 と な り ま す 。 


・bolder 
一 段階 太く し ます 。 


・1ighter 
一 段階 細く し ます 。 


指定 で きる 値 と し て は 、 太 さ を 細か く 指 定 で きる よう に な っ て いま す が 、 日 本 語 の 環境 で は 太 さ の 
異な る 日 本 語 フォ ント が それ ほど 多く イン ス トー ル さ れ て いる こと は 期待 で きま せん 。 そ の た め 、 
値 と し て は シン プル に 「bold」 を 使用 する の が 一 般 的 で す 。strong 要 素 の よう に 最初 か ら 太字 で 
表示 され る フォ ント を 標準 状態 に 戻し た い 場 合 は 、「norma1」 を 指定 し ます 。 


ゆび font-style プロ パテ ィ 
font-style プロ パテ ィ に は 次 の 属性 が 指定 で きま す 。 初期 値 は 「norma]」 で す 。 


font-style に 指定 で きる 値 
*:1EaitG 


イタ リッ ク 体 (イタ リッ ク 体 専用 に デザ イン され た フォ ント ) で 表示 し ます 。 イ タリ ッ ク 体 が な 
い 場 合 は 、「ob] ique] が 指定 され た も の と し て 処理 され ます 。 


・ob1ique 
斜体 ( 元 の 書体 を シン プル に 斜め に し た フォ ント ) で 表示 し ます 。 斜 体 が な い 場 合 は 、 標 準 の フ 








ォ ン ト を 斜め に 変換 し て 表示 し ます 。 


・normal 
イタ リッ ク 体 や 斜体 で は な い 標 準 の フォ ント で 表示 し ます 。 


font-weight と 同様 に 、 一 般 的 な ユー ザー の 環境 に お いて 、 日 本 語 フ ォ ン ト に イタ リッ ク 体 や 斜体 
が 用 意 さ れ て いる こと は 期待 で きま せん 。 そ の た め 、 日 本 語 を 斜体 で 表示 させ た い 場 合 は 、 値 と し 
て 「ita1ic」 を 指定 し ます (そう する と 、 イ タリ ッ ク 体 が あれ ば それ を 採用 し 、 そ れ が な けれ ば 
斜体 を 採用 し 、 そ れ も な けれ ば 標準 の フォ ント を 斜め に 変換 し て 表示 され ます )。em 要素 や i 要 素 
の よう に 最初 か ら 斜 体 で 表示 され る フォ ント を 標準 状態 に 戻し た い 場 合 は 、「norma1] を 指定 し 
ます 。 


P) 
EE そ に だ だ 


と > フォ ント 関連 の 値 を まとめ て 指定 する 


あ font プ ロ パ ティ 

実は し 、 こ こま で に 説明 し て きた フォ ント 関連 の プロ パテ ィ の 値 を 、 ま と め て 一 度 に 指定 で きる プロ 
パテ ィ が あり ます 。 それ が font プ ロ パ ティ で す 。 

今 の と ころ CSS3 の 仕様 で は これ 以外 の 値 も 指定 で きる こと に な っ て いま す が 、 日 本 語 環 境 で は あ 
まり 使用 され な いも の (現時 点 で は ほとん ど 使 用 で き な い も の ) も 含ま れ て いる た め 、 本 書 で は 以下 
の 値 に 限っ て 指定 方 法 を 説明 し ます 。 


font に 指定 で きる 値 


・font-style の 値 
font-sty1le プロパ ティ に 指定 で きる 値 が 指定 で きま す 。 


・font-weight の 値 
font-weight プ ロ パ ティ に 指定 で きる 値 が 指定 で きま す 。 


・font-size の 値 。 ※ 必 須 
font-s1ze プロ パテ ィ に 指定 で きる 値 が 指定 で きま す 。 


・]1ine-height の 値 
1ine-height プロパ ティ に 指定 で きる 値 が 指定 で きま す 。 


・font-fami1y の 値 ※ 必 須 
font-fami1y プロ パテ ィ に 指定 で きる 値 が 指定 で きま す 。 








094 





あ 値 の 指定 順序 に つい て 
Tine-heght の 値 を 除き 、 各 プロ パテ ィ の 値 は 半角 スペ ー ス で 区 切っ て 指定 し ます 。 た だ し 、 
必要 な 値 だ け を 任意 の 順序 で 指定 で きる わけ で は な い 点 に 注意 し て くだ さい 。 値 は 次 の ルー ル で 


指定 し ます 。 


1. は じ め に 、 必 要 に 応じ て font-style と font=weight の 値 を 指定 し ます 。 順序 は どちら 
が 先 で も か まい ませ ん 。 指定 し な けれ ば 値 は それ ぞ れ norma] に リセ ッ ト さ れ ま す 。 

2. 次 に 、fOnt= size の 値 を 指定 し ます 。 こ の 値 は 省略 で きま せん 。 

3. 次 に 、 必 要 に 応じ て Tine=height の 値 を 指定 し ます 。 こ の 値 を 指定 する 場合 は 、font- 
s1ze の 値 と の あい だ を 半角 の スラ ッシュ (/) で 区 切り ます 。 指 定 し な けれ ば 値 は norma] 
に リセ ッ ト さ れ ま す 。 

4. 最後 に 、font-famfly の 値 を 指定 し ます 。 こ の 値 は 省略 で きま せん 。 


sample/chapter-05/lecture-5-3/03-font.css 


hl { 
font: 24pt serif: 


} 
pt 

font: bold 13px/1.7 "メイ リオ "。 "Meiryo"。 sans-Ser1jf: 
} 


font プロ パテ ィ の 使用 例 





と テキ スト 関連 プロ パテ ィ 
さて 、 続 け て フォ ント 以外 の テキ スト 関連 プロ パテ ィ を 紹介 し て いき ます 。 フォン ト 関 連 プ ロ パ テ 
ィ は 見 た 目 の 変化 が ちょ っ と 地味 で し た が 、 こ こ か ら は 見 た 目 も それ な り に 変化 し ます 。 


ゆ text-shadow プロ パテ ィ 1CSS3 新 | 
は じ め は Chapter 2 で 使用 し た text-shadow プロ パテ ィ で す 。 そ の 名 の と お り 、 テ キス ト に 影 を 
表示 させ る プロ パテ ィ で す 。 


text-shadow に 指定 で きる 値 








ゆ 影 の 表示 位置 の 指定 方 法 

テキ スト に 影 を 表示 させ る 場合 は 、 ま ず 「 単 位 つ き の 実 数 ] で 影 の 表示 位置 を 指定 し ます 。 影 の 
表示 位置 は 、 元 の テキ スト の 位置 を 基準 に 、 そ こ か ら 大 方 向 へ の 移動 距離 、 下 方 向 へ の 移動 距離 
の 順に 半角 スペ ー ス で 区 切っ て 指定 し ます 。 影 を 左 方 向 、 上 方 向 に 移動 させ た い 場 合 は 、 そ れ ぞ 
れ マ イナ ス の 値 を 指定 し て くだ さい 。 

さら に 半角 スペ ー ス で 区 切っ て 、 影 を ぼかす 範囲 (ぽか し の 強 さ ) を 指定 する こと も で きま す 。 

影 の 色 を 指定 する 場合 は 、 こ れ ら の 数 値 全 体 の 前 か 後ろ に 、 半 角 ス ペー ス で 区 切っ て 指定 し ます 。 
色 を 指定 し な けれ ば 、 影 は color プロパ ティ の 色 で 表示 され ます 。 





右 に 3 ピク セル 下 に 3 ピク セル 






左 に 3 ビク セル 上 に 3 ピク セル 





ぼかし 5 ビク セル 


右 に 3 ピク セル 下 に 3 ビク セル 






ぽか し 5 ピク セル 半 透 明 の 黒 











影 の さま ざま な 指定 方 法 の 例 


複数 の 影 を 指定 する 場合 

また 、 影 は 1 つ だ け で な く 複 数 表示 させ る こと も で きま す 。 複数 の 影 を 表示 させ る に は 、 通 常 の 影 
の 指定 を カン マ で 区 切っ て 複数 書く だ け で OK で す 。 そ の 場合 は 、 よ り 前 に (左側 に ) 指定 され て い 
る 影 の 方 が 上 に 重なっ て 表示 され ます 。 





HTML sample/chapter-05/lecture-5-3/04.html 


01 <h1> こ れ は h1 要素 で す 。 く </h1> 


02 
03 <h2> こ れ は h2 要素 で す 。 く </h2> 





CSS sample/chapter-05/lecture-5-3/04-text-shadow.cSSs 











gh ho IN2 
02 font-size: 40Ppx: 





55 て 













096 





ッ oO Rm So 
SS AO OO SS CO 


03 1 

04 h1 【 
color: #fffi 
background-image: ur1(1images/]eaf.jpg): 
text-shadow: 3px 3px 5px rgba(0,0,0,0.5): 


color: #666: 
background: #Ccc: 
text-shadow: -1px -1px 2px #000。 1px 1px 2DxX #fff: 

















上 の ソー スコ ー ド 例 を 表示 させ た と ころ 


ゆ text-align プロ バ パティ 
次 は 、 行 揃え を 指定 する text-align プロ パテ ィ で す 。 
この プロ パテ ィ は 、 ブ ロッ クレ ベル 要素 に し か 指定 で き な い 点 に 注意 し て くだ さい (ブロ ッ ク レ ベ 


ル 要 素 に 指定 し て 、 そ の 内 容 で ある イン ライ ン 要 素 全 体 の 行 揃え を 設定 し ます )。 次 の 値 が 指定 で 
きま す 。 


text-align に 指定 で きる 値 





CaAPTE ょ て テキ スト 











HTML sample/chapter-05/lecture-5-3/05.html 


01 <h1> 左 揃え く /h1> 
02 <h2> 中 央 揃え く /h2> 





03 <h3> 右 揃え く </h3> 


CSS sample/chapter-05/lecture-5-3/05-text-align.css 


h1, h2, h3 { 

font-size: 30Px: 
り 
h1 { text-align: left: } 
h2 { text-align: center: } 
h3 { text-align: right: } 




















上 の ソー スコ ー ド 例 を 表示 させ た と ころ 


ぶ text-decoration プロ パテ ィ 

次 は 、 主 に テキ スト に 下線 を 表示 させ る 際 に 使用 する text-decoration プロ パテ ィ です 。 次 の 値 が 
指定 で きま す 。 リ ンク の よう に は じ め か ら 下 線 が 表示 され て いる テキ スト の 下線 を 消す に は 「none]」 
を 指定 し ます 。 


text-decoration に 指定 で きる 値 
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HTML sample/chapter-05/lecture-5-3/06.html 


01 <h1> 下 線 く </h1> 
02 <h2> 上 線 </h2> 
03 <h3> 取消 線 く /h3> 





CSS sample/chapter-05/lecture-5-3/06-text-decoration.css 


01 h1, h2。h3 { 
02 font-s1lze: 24Ppx: 
font-we1ght: normal: 


05 h1 { text-decoration: underline: } 
06 h2 { text-decoration: overline: } 
07 h3 { text-decoration: 1ine-through: } 

















text-decoration プロ パテ ィ の 使用 例 








上 の ソー スコ ー ド 例 を 表示 させ た と ころ 


@Wletter-spacing プロ パテ ィ 

次 は 文字 間隔 を 指定 する lettersspacing プロ パテ ィ で す 。 標準 の 文字 間隔 の 状態 か の ら 、 ど れ だ け 
間隔 を 開く の か を 指定 し ます 。 マ イナ ス の 値 を 指定 し て 文字 間隔 を 狭く する こと も で きま す 。 次 の 
値 が 指定 で きま す 。 


letter-spacing に 指定 で きる 値 





099 CuAprek て テキ スト 











HTML sample/chapter-05/lecture-5-3/07.html 


01 <h1> 文字 間 隔 を 「-2px] に し て いま す 。</h1> 
02 <h2> 文字 間隔 を 「norma1] に し て いま す 。 く </h2> 
03 <h3> 文字 間隔 を 「3px] に し て いま す 。</h3> 
04 <h4> 文字 間 隔 を 「6px]」 に し て いま す 。</h4> 





CSS sample/chapter-05/lecture-5-3/07-letter-spacing.cSSs 


01 h1。 h2, h3, h4 { 
font-size: 16Dx: 
03 font-weight: normali 
] 
h1 { letter-spacing: -2px: } 
h2 { letter-spacing: normal: } 
h3 { letter-spacing: 3px: ] 
h4 { letter-spacing: 6px: } 











「2px」 に し て いま す 。 
文字 間隔 を 「normal」 に し て いま す 。 
文字 間隔 を 「3px」 に し て いま す 。 


文字 間隔 を 「6px」 に し て いま す 。 








上 の ソー スコ ー ド 例 を 表示 させ た と ころ 


@text-indent プロ パテ ィ 

次 は ブロ ッ ク レ ベル 要素 の 1 行 目 の イン デン ト ( 字 下げ ) の 量 を 指定 する text-indent プ ロ パ ティ で 
す 。 通常 は p 要 素 に 適用 し ます が 、 そ れ 以 外 の ブロ ッ ク レ ベル 要素 に も 適用 で きま す 。 初期 値 は 0 
で す 。p 要 素 に 対し て 「1em] を 指定 する と 、 段 落 の 先頭 が ほぼ 1 文字 分 あき ます 。 次 の 値 が 指定 
で きま す 。 


text-indent に 指定 で きる 値 














HTML sample/chapter-05/lecture-5-3/08.html 





01 <p> 

02 その 講習 会 場 で イン デン ト と いう 言葉 を 初め て きい た と き 、 文 男 は 入れ 歯 安定 剤 の こと を 想像 し た 。 
そう いえ ば そろ そろ な く な りか け て いた か も し れ な い 。 文男 は 忘れ な いよ うに と メモ 帳 に 「 イ ン デ 
ント 買う 」 と 書い た 。 

03 </p> 

04 <P> 

05 その 帰り 道 、 文 男 は ドラ ッ グ ・ ス ト ア に 寄っ た 。 イ ン デ ント を 購入 する こと を 忘れ ず に お ぽ え て い 
た の だ 。 

06 </p> 








CSS sample/chapter-05/lecture-5-3/08-text-indent.css 





01 p { text-indent: 1em: } 











text-indent プロ パテ ィ の 使用 例 


⑤) サン プル 








その 講習 会 場 で イン デン ト と いう 言葉 を 初め て きい た 
と き 、 文 男 は 入れ 歯 安定 剤 の こと を 想像 し た 。 そ うい え 
ば そろ そろ な く な りか け て いた か も し れ な い 。 文男 は 忘 
れ な いよ うに と メモ 帳 に 「 イ ン デ ント 買う 」 と 書い た 。 


その 帰り 道 、 文 男 は ドラ ッ グ ・ ス ト ア に 寄っ た 。 イ ン 
デン ト を 購入 する こと を 忘れ ず に お ぼ え て いた の だ 。 


L_ 


上 の ソー スコ ー ド 例 を 表示 させ た と ころ 











⑱text-transform プロ パテ ィ 

次 の textstransform プ ロ パ ティ を 使用 する と 、 ア ルフ ァ ベ ッ ト を 天文 字 で 表示 させ た り 、 小 文字 
で 表示 させ た りす る こと が で きま す 。 

も ちろ ん 、 ソ ー ス コー ド 上 で すべ て 大 文字 で 書け ば その まま 大 文字 で 表示 され る こと に な り ま す が 、 
表示 上 大 文字 に する の か 小文字 に する の か と いっ た 制御 に 関し て は 、Web ペ ー ジ の 元 デ ー タ で あ 
る HTML の ソー スコ ー ド 自体 を 書き 換え ず に 、CSS 側 で 対処 する 方 が スマ ー ト で す 。 し か も 、 ア 
ルフ ァ ベ ッ ト を すべ て 大 文字 で 入力 し て し まう と 、 音 声 で 読み 上 げ さ せる と き に 正しく 読み 上 げ ら 
れ な く な る 可能 性 も あり ます (環境 や その 単語 に も より ます が 、 す べ て 大 文字 に する と 単語 と し て 
発音 され ず に 、1 文 字 ず つ ア ルフ ァ ベ ッ ト で 読み 上 げ ら れる 場合 も あり ます )。 

次 の 値 が 指定 で きま す 。 


!oo CgAPTE ょ て テキ スト 





text-transform に 指定 で きる 値 








HTML 


CSS 


} 





sample/chapter-05/lecture-5-3/09.html 


01 <hl>This property transforms text.</h1> 
02 <h2>This property transforms text. く </h2> 
03 <h3>This property transforms text. く </h3> 
04 <h4>This property transforms text. く </h4> 





sample/chapter-05/lecture-5-3/09-text-transform.css 


h1, h2, h3, h4 { 


font-s1ize: 16PXi 
font-we1ght: normali 


h1 { text-transform: UPDerCase: } 
h2 { text-transform: ]owercase: ] 
h3 { text-transform: capitalize: } 
h4 { text-transform: nonei ] 








text-transform プロ パテ ィ の 使用 例 





THIS PROPERTY TRANSFORMS TEXT. 


this property transforms text. 


Tnis Property Transforms Text. 


This property transforms text. 


上 の ソー スコ ー 





ド 例 を 表示 させ た と ころ 











1o! 








1!02 





あゆ white-space プロ パテ ィ 

通常 、HTML で は 半角 スペ ー ス ・ 改 行 ・ タ ブ は (連続 し て いれ ば それ ら を まとめ て ) 1 つの 半角 スペ 
ー ス に 変換 し て 表示 し ます が 、white-space プロ パテ ィ を 使用 する と その 表示 方 法 を 変更 する こ 
と が で きま す 。 指定 する 値 に よっ て 、 そ れ ぞ れ 次 の よう な 表示 と な り ま す 。 


white-space に 指定 で きる 値 


・normal 
半角 スペ ー ス ・ 改 行 ・ タ ブ は 、 (連続 し て いれ ば まとめ て ) 半角 スペ ー ス に 変換 し て 表示 し ます 。 
幅 が いっ ぱい に な る と 自動 的 に 行 を 折り 返し ます 。 


・nowrap 
半角 スペ ー ス ・ 改 行 ・ タ ブ は 、 (連続 し て いれ ば まとめ て ) 半角 スペ ー ス に 変換 し て 表示 し ます 。 
自動 的 な 行 の 折り 返し は し せん 。 


・Pre 
半角 スペ ー ス ・ 改 行 ・ タ ブ は 、 そ の まま 入力 され て いる 通り に 表示 し ます 。 自動 的 な 行 の 折り 返 
し は し せん 。 


・PTe-wrap 
半角 スペ ー ス ・ 改 行 ・ タ ブ は 、 そ の まま 入力 され て いる 通り に 表示 し ます 。 幅 が いっ ぱい に な る 
と 自動 的 に 行 を 折り 返し ます 。 


・Pre-11ine 
半角 スペ ー ス と タブ は 、 (連続 し て いれ ば まとめ て ) 半角 スペ ー ス に 変換 し て 表示 し ます 。 改行 
に つい て は 、 そ の まま 入力 され て いる 通り に 表示 し ます 。 幅 が いっ ぱい に な る と 自動 的 に 行 を 
折り 返し ます 。 


た だ し 、 値 「pre=wrap] と 「pre-Tine」 に 関し て は 、2011 年 に 正式 な 仕様 と し て 公開 され た 
CSS2.1 で 新しく 追加 され た も の で 、Internet Explorer 8 以前 は 未 対応 で ある 点 に 注意 し て くだ さ 


い 。 


> ベン ダー プレ フィ ックス と は ? 


テキ スト 関連 プロ パテ ィ の 最後 に 、 縦 書き 用 の プロ パテ ィ を 2 つ 紹 介し ます 。 し か し 、 そ れ ら を 使 
用 する に は ペン ダー プレ フィ ックス と いう も の を 知っ て お く 必 要 が あり ます の で ここ で 説明 し て お 
きま し ょ う 。 

ここ まで に 登場 し た プロ パテ ィ は 、 基 本 的 に は CSS2.1 以前 の 仕様 に 含ま れ て いた (つま りす で に 
最終 的 に 仕様 が 確定 し て いる ) も の で す の で 、 と くに ベン ダー プレ フィ ックス な ど は 気 に す る こと 
も な く 使 用 で きま し た 。 し か し ご 存 知 の 通り 、CSS3 か ら 新しく 追加 され た 機能 の 多く は まだ 策定 
中 で 、 そ の 仕様 は 確定 し て いま せん 。 つ まり 、 現 在 の CSS3 の 仕様 は すでに 何 度 か 変更 され て いる 


CaAPTE を て テキ スト 





可能 性 が あり 、 こ れ か ら も 変更 され る 可能 性 が ある と いう こと で す 。 そ の よう な 機能 を 各社 ブラ ウ 
ザ が その まま 実装 し て し まう と 、 同 じ 機能 で も ブラ ウザ の 種類 や バー ジョ ン に よっ て 表示 結果 が 異 
な っ て し まう と いう 事態 が 発生 し ます 。 


そこ で 、 ブ ラウ ザ が 草案 (ワー キン グ ・ ド ラフ ト ) 段階 の 機能 を 実装 する 際 は 、 プ ロ パ ティ 名 や 関数 
名 な どの 直前 に ベン ダー プレ フィ ックス と 呼ば れる 接頭 辞 を つけ て 、 正 式 名 称 と は 異な る 名 前 に 変 
えて 実装 する こと に な っ て いま す 。 ベ ンダ ー プ レフ ィ ッ クス と は 、 ベ ンダ ー( ブ ラウ ザ や その エン 
ジン を 開発 し て いる 企業 ・ 組 織 ) ご と に 固有 の プレ フィ ックス (接頭 辞 ) の こと で 、 一 般 的 な ブラ ウ 
ザ で は 次 の も の が 使用 され て いま す 。 














フラ ウザ 
Google Chrome 
時 


ブラ ウザ と 使用 され て いる ベン ダー プレ フィ ックス 


ヘン た ニシ アシ レス レル 





-webkit- 
-webk1t- 








- 中 0Z- 





-mS- 











草案 段階 か ら 一 歩 進ん で 勧告 候補 と な っ た 仕様 に 含ま れ て いる 機能 に つい て は 、 ベ ンダ ー プ レフ ィ 
ックス は 基本 的 に は つけ られ ませ ん 。 "基本 的 に は " と 書い た の は 、 い っ た ん 勧告 候補 と な っ た 仕 
様 が 、 草 案 に 逆戻り し て し まう ケー ス な ども ある か ら で す 。 こ の よう に 、 ベ ンダ ー プ レフ ィ ッ クス 
が 必要 か どう か の 境界 は 意外 と 曖昧 で す 。 そ の よう な わけ で 、 基 本 的 に は ベン ダー プレ フィ ックス 
を つけ て お き 、 そ の あと に ベン ダー プレ フィ ックス を つけ な い 指 定 も 併記 し て お く と 良い で し ょ う 。 


同じ ブラ ウザ で も ベン ダー プレ フィ ックス つき の 名 前 と つい て いな い 名 前 の 両方 を サポ ー ト し て い 
る こと が あり ます 。 そ の 場合 は ベン ダー プレ フィ ックス 無し の 方 が より 新しい 仕様 に 沿っ た 実装 を 
し て いる 可能 性 が 高い の で 、 ベ ンダ ー プ レフ ィ ッ クス を つけ な い 指 定 を 必ず 最後 に 指定 し て お く よ 
うに し て くだ さい 。 そ うす る こと で 、 古 い 仕様 に 沿っ た 実装 は 新しい 実装 に 上 書き され て 、 よ り 正 
し い 表示 結果 が 得 ら れる よう に な り ま す 。 


ぁみ 縦 書 き 用 プロ パテ ィ 


金 writing-mode プロ パテ ィ 1CSS3 新 | 

で は さっ そく ベン ダー プレ フィ ックス が 必要 と な る CSS3 の writing-mode プロ パテ ィ を 使用 し て 
み ま し ょ う 。 こ の プロ パテ ィ は 、 横 書き (horizontal) か 縦 書 き (vertical) か を 指定 する プロ パテ ィ で 
す 。 た だ し 、 縦 書き で も 右 か ら 左 へ 読む 場合 と 、 左 か ら 右 へ と 読む 場合 が 考え られ ます の で 、 そ の 
方 向 も 含め た 値 が 用 意 さ れ て いま す 。 指定 で きる 値 は 次 の 通り で す 。 











10 邊 





writing-mode に 指定 で きる 値 





た だ し 、2012 年 7 月 の 時 点 で この プロ パテ ィ に 対応 し て いる の は 、 Google Chrome と Safari だ け 
で す 。 し か し 、 近 い 将 来 に Internet Explorer や Opera も 対応 する 可能 性 が ある た め 、 そ の 備え と 
し て それ ら の ベン ダー プレ フィ ックス つき の 指定 も 追加 し て あり ます 。 ま た 、Windows 環 境 の 場 
合 は 縦 書 き に する だ け で な く 、 縦 書き 用 の フォ ント (先頭 が めで は じ ま る フォ ント ) を 指定 する 必要 
が ある 点 に 注意 し て くだ さい (そう し な けれ ば 各 文 字 が 90 度 回 転 し た 状態 で 表示 され ます )。 





01 
02 
03 





HTML sample/chapter-05/lecture-5-3/10.html 






CSS 





< く body> 
<h1>CSS3 妖 怪 図鑑 く /h1> 
く P> 

は じ め か ら 無 理 の ある 企画 だ と は 思っ て いた 。C S S 3 の プロ パテ ィ を すべ て 妖怪 に 見 立て て 解 
説 する な ん て 別に 面白 くも な ん と も な いし 、 何 の 意味 も な いこ と だ 。 だ か ら 僕 は 最初 は その 依頼 を 
断っ た 。 そもそも そん な 原稿 は 書け る 気 が し な か っ た の だ 。 
</p> 
く P> 

し か し 僕 は つい 、 た と えば どん な 妖怪 が 登場 する こと に な る の だ ろう と 想像 し て し まっ た 。 す る 
と 予想 外 に 面白 い 妖 怪 た ち が 僕 の 頭 の 中 に 姿 を 見 せ は じ め た の だ 。 と りあ え ず 、 縦 僚 鬼 妖怪 「 雷 
天狗 猛 門 (ライ ティ ング モー ド )」 と いう の は どう だ ろう ? 雷神 と 天狗 が 合体 し た よう な 姿 を し た 
狂 猛 そう な 妖怪 だ 。 
く /p> 
< く body> 





















sample/chapter-05/lecture-5-3/10-writing-mode.css 






body { 
-webkit-writing-mode: vertica] -r]: 
-moz-writing-mode: vertica]-r]: 
-ms-writing-mode: vertical -T]: 
-0-writing-mode: vertical-r]: 
writing-mode: vertica] -r]: 
font-family: "@MS 明 朝 "。 ser1if: 

]ine-height: 1.7: 
















writing-mode プロ パテ ィ の 使用 例 。Windows 環 境 で も 正しく 表示 させ る に は 、 先 頭 が @ で は じ ま る 縦 書 き 用 の フォ ント (この 例 で 
は 「@MS 明 朝 ]) を 指定 する 必要 が ある 


CgAPTE を て テキ スト 





| 

















6 立 
だ が ド 縦 の た 場 稿 最 な 立た 
全て 劉 中 * す し は 初 い て * は し 
体 - 鬼 に する か 書 は し て C じ S 
も し と 多才 る と し サ そ *^ 解 S め 
た い ぃ 人 怪 を と と 僕 る の 何 説 S か S 
ょ う = 見 予 に は 気 依 の す 3 ら 
う の 電 せ 四 な つ が 意 る の 無 の 
な は 天 は 外 る い し を 味 な プ 理 
姿 ど 狗 じ に の ` な 断 も ん ロロ の 妖 
を う 猛 め 面 だ た か つ な て パ あ 
し だ 到 た 白 ろ と つた い 別 テ る 怪 
た だ たろ の いう 吉 大 和 を 3 金 
狗 う ラ だ 妖 と ば の そ と 面 を 画 図 
導入 他人 0 な 2 
そ し 本 いっ ん と 鑑 
う 胃 イィ イ り ち し な も だ も て は 
な 神 ン シン あ が て 燃 そ か な 括 思 
狼 と グ え 僕 し 怪 ん らん 人 怪 っ 
公 天 モ ず の ま が な 僕 と に て 

狗 | ` 頭 っ 登 原 は も 見 い ぃ 

前 ペー ジ の ソー スコ ー ド 例 を 表示 させ た と ころ 


ゆ text-emphasis-style プロ パテ ィ 1CSS3 新 ! 


続け て 、 國 点 を 表示 させ る た め に 使用 する text-emphasis-style プロ パテ ィ も 紹介 し て お きま し ょ 
う 。 國 点 と は 、 縦 書き の 小説 な ど で 特 定 の 部 分 を 強調 する 目的 で テキ スト の 右側 に つけ られ て いる 


点 の こと で す 。 次 の 値 が 指定 で きま す 。 


text-emphasis-style に 指定 で きる 値 


・none 
圏 点 を 表示 させ ませ ん 。 


・fi11ed 
塗り つぶ し た 圏 点 に し ます 。 


・OPen 
塗り つぶ さ な い 圏 点 に し ます 。 


・SeSame 
一 般 的 な ゴマ 型 の 圏 点 を 表示 させ ます 。 


・dot 
小さ な 丸 の 圏 点 を 表示 させ ます 。 


・c1ircle 
大 き な 丸 の 圏 点 を 表示 させ ます 。 


・double-circle 
二 重 丸 の 圏 点 を 表示 させ ます 。 


・triangle 
三角 の 圏 点 を 表示 させ ます 。 


・ 文 字 
國 点 と し て 表示 させ る 文字 を 指定 し ます 。 





マヨ ユ す マロ ) 








この プロ パテ ィ に 対応 し て いる の も 、2012 年 7 月 の 時 点 で は Google Chrome と Safari だ け で す が 、 
将来 に 備え て ほか の ブラ ウザ の ベン ダー プレ フィ ックス を つけ た 指定 も 組み 込ん で あり ます 。 





01 
02 
03 
04 


05 


07 





08 


01 





ーーーーーー 


に まい 


CSS 





HTML sample/chapter-05/lecture-5-3/11.html 








く body> 
<h1>CSS3 妖 怪 図鑑 </h1> 
く P> 

は じ め か ら <em> 無理 の ある 企画 </em> だ と は 思っ て いた 。C S S 3 の プロ パテ ィ を すべ て 妖怪 
に 見 立て て 解説 する な ん て 別に 面白 くも な ん と も な いし 、 何 の 意味 も な いこ と だ 。 だ か ら 僕 は 
<em> 最初 は く /em> その 信頼 を 断っ た 。 そ も そ も そ ん な 原稿 は 書け る 気 が し な か っ た の だ 。 
く /P> 
く P> 

し か し 僕 は つい 、 た と えば どん な 妖怪 が 登場 する こと に な る の だ ろう と 想像 し て し まっ た 。 す る 
と 予想 外 に 面白 い 妖 怪 た ち が 僕 の 頭 の 中 に 姿 を 見 せ は じ め た の だ 。 と りあ え ず 、<em> 縦 僚 鬼 妖怪 
</em> 「<em> 雷 天 狗 猛 門 </em> (ライ ティ ング モー ド )」 と いう の は どう だ ろう ? 雷神 と 天狗 が 
合体 し た よう な 姿 を し た 狂 猛 そう な 妖怪 だ 。 
</p> 


09 </body> 








sample/chapter-05/lecture-5-3/11-text-emphasis.css 





em { 
font-style: normal: 
-webkit-text-emphasis-style: sesame: 
-m0z-text-emphas1s-style: sesame: 
-ms-text-emphasis-style: sesame: 
-0-text-emphasis-style: sesame: 
text-emphasis-style: sesame: 














水 半 wmN 設 婁 さて 選 富 計 …r サ 合 屯 き 堂 








text-emphasis-style プロ パテ ィ の 使用 例 。 縦 書き に する 部 分 の ソー スコ ー ド は 前 の サン プル と まっ た く 同 じ な の で 省略 





(⑩ サ ンプ フル x 
[oe) 人 上 拉 
モ ず の た 場 原 は な 立た 
1 "中 まし 策 陳 や て “な は 、 
ド 縦 (に する か は 初 し し て C じ S 
に 邊 を と と 人 居 ける そ 何 還 3 か 
は まる た 拉 すす を ます 
ゝ 怪 ヽ っ ゝ 
うこ は 人 る い が 題 味 な ア 腸 3 
の 雷 \ じ に の ` し も ん ロロ の ヽ 妖 
は 天 い め 面 だ た な 断 な て パ あ ヽ 
ど 腹 た 白 ろ と か つっ つい 別 テ る ヽ 怪 
う 猛 の い うえ っ つた こ に ん ィ 企 ヽ 
だ 怒 * だ 妖 と ば た * と 面 を 画 
る っ 。 信 拉 と の を そ だ 自 す だ ど 
し ン - 穫 こ ル ん だ も “< 式 と 負 
2 攻 の ち も 導 を だ もそ は 
テ あ が て 敗 も か な 妖 思 
雷 イィ イ え 優し 人 怪 そら ん 僅 っ 
神 ン の ま が ん 僕 と に て 
と グ 頭 っ 登 な 晴 生 0 








上 の ソー スコ ー ド 例 を 表示 させ た と ころ 


!06 CrAPTE た て テキ スト 














よく 使う 主要 な セレ クタ 


Lecture 3-4 で 一 度 説明 し て いま す が 、CSS を どの 要素 に 対し て 適用 する か を 指定 する の が 「 セ 
レク タ 」 で す 。 こ こま で は 「 要 素 名 | を セレ クタ に 使用 し て きま し た が 、 セ レク タ に は 他 に も 
いろ いろ な 種類 が あり ます 。 





ブラ ウザ の 対応 状況 に 注意 








CSS3 で 使用 で きる セレ クタ は 、 約 40 種 類 あ り ま す *“。 た だ し 、Internet Explorer は バー ジョ ン 9 
で や っ と その すべ て に 対応 し た も の の 、 そ れ よ り 前 の バー ジョ ン で は 多く の セレ クタ に 未 対応 と な 
っ て いま す 。 そ の た め 、 現 時 点 で CSS3 の セレ クタ を 使用 する 際 は 、InternetEXplorer の 対応 状況 
に 注意 する 必要 が あり ます 。 


その よう な 状況 の た め 、 実 際 の 制作 で 頻繁 に 使用 され て いる セレ クタ は 、 全 体 の 中 の ご く 一 部 
(CSS3 以前 か ら 利用 で きた も の の 中 の 更に 一 部 ) で す 。 そ こ で 、 ま ず は その よう な 一 般 的 な ブラ ウ 
ザ の ほとん ど が 対応 し て いる 主要 な セレ クタ か ら 紹介 し まし ょ う 。 


な お 、CSS3 の セレ クタ に 関す る 仕様 は 2011 年 9 月 29 日 の 段階 で 正式 に 確定 し た も の と し て 公開 
され て いま す 。 その た め 、 セ レク タ に 関し て は ペン ダー プレ フイ ックス (p.102 参照 ) を つけ る 必要 
は 一 切 あ り ま せん 。 


※8: ここ で 約 40 種 類 と し て いる の は 、 す で に 正式 な 仕様 と し て 公開 され て いる 「Selectors Level 3」 で 定義 され て いる セレ クタ 
の こと で す 。2012 年 7 月 段階 で は まだ 草案 の 「CSS Basic User Interface Module Level 3] に は 、 そ れ 以 外 の セレ クタ も 含 
まれ て いま す 。 


1O5 CuAprek 6 CSS の 適用 先 の 指定 方 法 








> タイ プ セ レク タ 


ここ まで の サン プル で 使用 し て きた よう に 、「 要 素 名 ]」 を その まま 使っ て 指定 する セレ クタ の こと 
を タイ プ セ レク タ と 言い ます (要素 の タイ プ 、 つ まり 要素 の 種類 で 指定 する セレ クタ と いう 意味 で 


す )。 


「 





HTML sample/chapter-06/lecture-6-1/01.html 





01 <h1> こ れ は h1 要素 で す </h1> 
02 <h2> こ れ は h2 要素 で すく </h2> 
03 <h3> これ は h3 要 素 で す </h3> 





CSS sample/chapter-06/lecture-6-1/01-type.css 





01 hl1 { color: red: } 
02 h2 { color: bl1ack: } 
03 h3 { color: blue: } 




















タイ プ セ レク タ の 使用 例 





これ は h1 要素 で す 


これ は h2 要 素 で す 
これ は h3 要 素 で す 





上 の ソー スコ ー ド 例 を 表示 させ た と ころ 








ぁみ ユニ バー サル セレ クタ 


「 要 素 名 」 の 代わ り に 「 ま | を 指定 する と 、 基 人 の 要素 に 適用 され ます 。 こ の セレ クタ は 名詞 駅 
サル セレ ク タ と 呼ば れ て いま す 。 

た だ し 、「*」 の 直後 に ほか の セレ クタ が 続く 場合 に 限り 、「*| を 省略 し て 書く こと が で きま す ( 次 
の 「 ク ラス セレ クタ 」 の と ころ で 詳し く 説明 し ます )。 





HTML sample/chapter-06/lecture-6-1/02.html 





_ 
01 <h1> こ れ は h1 要素 で すく /h1> | 
02 <h2> こ れ は h2 要素 で すく </h2> 
03 <h3> こ れ は h3 要 素 で すく /h3> | 





CSS sample/chapter-06/lecture-6-1/02-universal.css 





| 01 * { color: redi } | 














ユニ バー サル セレ クタ の 使用 例 


(⑤⑥) サン ブル 








これ は h1 要素 で す 


これ は h2 要 素 で す 
これ は h3 要 素 で す 








上 の ソー スコ ー ド 例 を 表示 させ た と ころ 


> クラ ス セ レク タ 


class 属 性 に 特定 の 値 が 指定 され で ぶる 要素 を 適用 対象 と する こと が で きま す 。 こ の セレ クタ を 使 
用 する 場合 、 は じ め に 「 要 素 の 名 前 ] また は 「* ま | を 書き ます 。 こ れ は 、 適 用 対象 を 特定 の 要素 に 
限定 する 場合 は 「 要 素 の 名 前 ] を 指定 し 、 要 素 を 得 に 限定 し な い 場 合 は 「*] を 使用 する と いう こ 
と で す 。 あ と は 、 そ の 直後 に ピリ オド (.) を つけ 、 さ ら に 続け て class 属 性 の 値 を 追加 する だ け で 
OK で す 。 


1O CHAPTEF 6 CSS の 適用 先 の 指定 方 法 








この よう に 「*」 の 直後 に 何 か が 続く 場合 に は 、「*] を 省略 する こと が で きま す 。 た と えば 、class 
属性 の 値 と し て 「sample」 が 指定 され て いる 要素 を 適用 対象 と し た い 場 合 に は 、 次 の よう に 書く 
こと が で きま す 。 


P・sample {・・・} ペー class="sample" が 指定 され て いる p 要 素 に 適用 
*.sample {・・・] キー class="sample" が 指定 され て いる 任意 の 要素 に 適用 
-Sample {・・・} さ ーー 「*| を 省略 し た 書き 方 


クラ ス セ レク タ の 書き 方 の パタ ー ン 


class 属性 の 値 は 半角 スペ ー ス で 区 切っ て 複数 指定 で きま す が 、 こ の 指定 方 法 で は 指定 され た 値 が 
複数 の 値 の うち の どれ か 1 つと 合致 すれ ば CSS が 適用 され る こと に な り ま す 。 





HTML sample/chapter-06/lecture-6-1/03.html 


01 <p> こ れ は p 要 素 で すく </p> 

02 <p class="abc"> こ れ は p 要 素 で すく </p> 

03 <p class="abc def gh1"> こ れ は p 要 素 で すく </p> 
04 <p> こ れ は p 要 素 で すく </p> 











CSS sample/chapter-06/lecture-6-1/03-class.css 








01 .abc { color: red: } 














クラ ス セ レク タ の 使用 例 








これ は p 要 素 で す 








これ は p 要 素 で す 
これ は p 要 素 で す 






これ は p 要 素 で す 





上 の ソー スコ ー ド 例 を 表示 させ た と ころ 








リロ 2 





ぁみ |D セ レク タ 


クラ ス セ レク タ と 同様 に 、id 属 性 に 特定 の 値 が 指定 され で いる 要素 を 適用 対象 と する こと が で きま 
す 。 書き方 も クラ ス セ レク タ と 同様 で す が 、ID セレ クタ の 場合 は 「.」 で は な く 「 落 を 使い ます 。 
この 場合 も 、「*] は 省略 可能 で す 。 

な お 、id 属 性 は class 属性 と は 異な り 、 半 角 ス ペー ス で 区 切っ て 複数 の 値 を 指定 する こと は で き な 
い 点 に 注意 し て くだ さい 。 





クラ ス セ レク タ の 書き 方 の パタ ー ン 





HTML sample/chapter-06/lecture-6-1/04.html 


01 <p> こ れ は p 要 素 で すく /p> 
02 <p id="abc"> こ れ は p 要 素 で すく /p> 
03 <p> こ れ は p 要 素 で すく /p> 
04 <p> こ れ は p 要 素 で すく /p> 








CSS sample/chapter-06/lecture-6-1/04-id.css 





01 #abc { color: red: } 














ID セレ クタ の 使用 例 


これ は p 要 素 で す 
これ は p 要 素 で す 
これ は p 要 素 で す 
これ は p 要 素 で す 





上 の ソー スコ ー ド 例 を 表示 させ た と ころ 


CmAPre- 6 CSS の 適用 先 の 指定 方 法 








と 疑似 クラ ス 


疑似 クラ ス と は 、 あ る 要素 が 特定 の 状態 に ある と き に 限定 じ て 適 用 する セレ クタ で す 。 た と えば 、 
同じ a 要 素 で も 「 リ ンク 先 を まだ 見 て いな い 状 態 」 と 「 リ ンク 先 を すでに 見 た 状態 」 で 異な る 文字 
色 を 指定 する 場合 な ど に 使用 し ます 。「 ク ラス 」 と いう 名 前 が つい て は いま す が 、class 属 性 と の 
関連 は あり ませ ん 。 


疑似 クラ ス は 全部 で 20 種 類 以 上 あり ます が 、 そ の 多く は CSS3 で 新しく 追加 され た も の で 、 ブ ラ 
ウザ の 対応 状況 な どか ら そ の 多く は まだ 利用 され て いま せん 。 こ こ で は 、 一 般 的 な Web ペ ー ジ で 
利用 され る こと の 多い 、 以 下 の 4 つ の 疑似 タラ ス を 紹介 し て お きま す 。 こ れ ら は 古い ブラ ウザ で も 
基本 的 に は 問題 な く 利用 で きま す 。 




















ビュ ウシ ルル 

要素 :1ink リン ク 先 を まだ 見 て いな い 状 態 の a 要 素 

要素 :visited リン ク 先 を すでに 見 た 状態 の a 要素 

要素 :hover カー ソル が 上 に ある 状態 の 要素 

要素 :active マウ ス の ボタ ン な ど が 押さ れ て いる 状態 の 要素 
主要 な 4 つの 疑似 クラ ス 





「:1ink」 と 「:visited] は リン ク 部 分 、 つ まり a 要 素 だ け を 対象 と し ます が 、「:hover」 と 「:active]l 
は a 要 素 以外 に も 使用 で きま す 。 た だ し 、Internet Explorer 6 以前 の バー ジョ ン で は 、「: hover] 
は a 要 素 に し か 適用 され な い 点 に 注意 し て くだ さい 。 ま た 、「:active] は ブラ ウザ の 種類 に よっ 
て は 反応 し な いも の も あり ます 。 


上 表 の 「 要 素 ] と 書い て ある 部 分 に は 、 ク ラス セレ クタ や ID セレ クタ の と き と 同 じ よ うに 「 要 素 
の 名 前 ] また は 「*| が 指定 で き 、「*] は 省略 可能 で す 。 


人 ゆ 疑 似 ク ラス の 指定 順序 

一 般 に 、 リ ンク 部 分 に は 表 で 示し た 4 つの 疑似 クラス が 同時 に 指定 され ます 。 そ こ で 注意 する 必要 
が ある の は 、 指 定 する 順序 で す 。 

詳し く は 「Lecture 6-4 指定 が 競合 し た 場合 の 優先 順位 (p.122)」 で 解説 し ます が 、CSS で は 同 
じ 部 分 に 対し て 複数 の 異な る 表示 指定 を する と 、 あ と か ら の 指定 が 有効 と な り ま す ( 前 の 指定 は 後 
の 指定 で 上 書き され ます )。 


疑似 クラ ス の 中 に は 、 同 時 に その 状態 に な り 得 る も の と な り 得 な いも の が ある の で す が 、 同 時 に そ 
の 状態 に な り 得る も の で 指定 が 競合 し た 場合 、 あ と か ら の 指定 が 有効 に な っ て し まい ます 。 

た と えば 、「:1ink] と 「:visited] が 同時 に その 状態 に な る こと は あり ませ ん が 、「: hover] 
と 「:active] は ほか の 状態 と 同時 に な る こと が あり ます 。 そ の た め 、 ま ず 最 初 に 「:1ink] と 











「:visited] の 指定 を 書き 、 そ の あと に それ を 上 書き する よう に 「:hover] と 「:active」 を 
順に 指定 し て くだ さい *5。 





HTML sample/chapter-06/lecture-6-1/05.html 





01 <p> 

02 ここ は p 要 素 の 内 容 で す 。<a href="06.htm1"> こ の 部 分 は a 要 素 で す 。</a> ここ は p 要 素 の 
内 容 で す 。 

03 </p> 





CSS sample/chapter-06/lecture-6-1705-pseudo-clasSs.cSSs 





| an ailink { color: blue: } 
02 azvisited { color: purple: } 
03 a:hover  { color: red:i } 
04 azactive { color: yellow: } 


























疑似 クラ ス の 使用 例 





ここ は pp 要素 の 内 容 で す 。 こ の 部 分 は a 要 素 で す 。 
こ は p 要 素 の 内 容 で す 。 





上 の ソー スコ ー ド 例 を 表示 させ た と ころ 


※9: た と えば 、 リ ンク 部 分 の 文字 色 の 指定 で 、「:hover]」 の あと に 「:]ink] と 「:visited」 の 指定 が ある と 、「:hover」 で 
の 指定 は 常に 「:1ink] また は 「:visited] の 指定 に 上 書き され る こと に な り ま す 。 同様 に 、「:active] の あと に 「:hover] 
が ある と 、「:active] の と き に は 常に 「:hover」 の 指定 で 上 書き され る こと に な り ま す 。 


アコ CgAPTEk 6 CSS の 適用 先 の 指定 方 法 








結合 


セレ クタ を カン マ (,) で 区 切る こと で 、 適 用 先 を 複数 指定 で きる こと は すでに 説明 し まし た 。 それ 
と 同様 に 、 セ レク タ を 半角 スペ ー ス で 区 切っ て 複数 並べ る と 、「 左 側 の 適用 対象 ] の 中 に 含ま れる 
「 右 側 の 適用 対象 ] に 表示 指定 が 適用 され ます 。 半 角 ス ペー ス で 区 切る セレ クタ は 2 つ に 限ら ず 、 
いく つ で も 区 切っ て 適用 対象 を 絞り 込む こと が で きま す 。 


た と えば 「h1 em] と 書く と 、h1 要素 の 中 に 含ま れる em 要素 だ け に 適用 され る こと に な り ま す 
(p 要素 内 の em 要素 な ど に は 適用 され ませ ん )。 

同様 に 、「body .top h1 em] と 書く と 、「class="top"」 が 指定 され て いる body 要 素 に 含ま 
れる h1 要素 に さら に 含ま れる em 要素 だ け に 適用 され ます 。 





HTML sample/chapter-06/lecture-6-1/06.html 





01 <h1> これ は く <em>h1 要素 く /em> で す 。</h1> 
02 <p> こ れ は <em>p 要 素 く /em> で す 。 く </p> 
03 <p> こ れ は <em> p 要素 く /em> で す 。 く </p> 





CSS sample/chapter-06/lecture-6-1/06-combinator.css 





| 01 hl em{ 

| 02 color: redi 
03 font-style: normal: 
04 } 














結合 子 の 使用 例 








(⑥ サン ブル 











これ は h1 要素 で す 。 


これ は 。p 要 素 で す 。 
これ は 。p 要 素 で す 。 










上 の ソー スコ ー ド 例 を 表示 させ た と ころ 
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その 他 の セレ クタ 


で は 次 に 、 ま っ た く 使 われ て いな いわ け で は な い の で す が 、 現 状 で は まだ あま り 使 われ て いな 
い セ レク タ を 紹介 し ます 。 こ れ ら の セレ クタ は 、Internet Explorer 以 外 の ブラ ウザ で は 、 極 端 
に 古い バー ジョ ン を 除け ば すべ て に 対応 し て いま す 。 し か し 、 Internet Explorer は バー ジョ ン 9 
で すべ て に 対応 し た も の の 、 そ れ よ り 前 の バー ジョ ン で は 未 対応 の も の が 多く あり ます 。 以降 
に 示す セレ クタ の 表 で は 、Internet Explorer 6 一 8 の 対応 状況 と 〇 X で 示し て あり ます の で 参 
考 に し て くだ さい 。 


py 属性 セレ クタ Icsss&l 


属性 セレ クタ は 、 特 定 の 属性 が 指定 され で いる 要素 、 ま た は 特定 の 属性 に 特定 の 値 が 指定 され で 
い ゆる 要素 を 適用 対象 と する た め の セ レク タ で 、 次 の も の が あり ます 。 








属性 セレ クタ EE | iEe | IE7 | iEg 
要素 [属性 名 ] [属性 名 」 の 属性 が 指定 され て いる 要素 9 1 ば 」 
8 [属性 名 」 の 属性 に 「 属 性 値 の 合 が 指定 され て いる 生 | | 
要素 [属性 名 "属性 値 "] 寺 ( 人 全 休 が ー 和 ) %WO 中 G 
[属性 名 」 の 属性 に 「 属 性 値 」 の 値 が 指定 され て いる 要 
要素 [属性 名 "属性 値 "] 素 ( 値 全体 また は 半角 スペ ー ス 区 切り の 値 の と れ か と 一 | X | 〇 





〇 
致 。 ク ラス セレ クタ と 同じ ) | 
「 属 性 名 」 の 属性 に 「 属 性 値 」 の 値 が 指定 され て いる 要 | | 
] 




















要素 [ 属性 名 | =" 属 性 値 "] 昌和 革 』 1 1 らら 
語 コ ー ド 「en-US」 な ど に 使用 ) | | 
要素 属性 名 *ー" 属 性 値 の 始め "] |「 属 性 名 」 の 属性 の 値 が 必 値 の 始 めで 始ま る 要 琵 | x | olo | 
要素 [ 属性 名 $-" 属性 値 の 終り "] 「 属 性 名 ] の 属性 の 値 が 「 属 性 値 の 終り 」 で 終わ る 要 | x | oO ] 〇 O | 
要素 [属性 名 *ー" 属性 値 の 一 部 "] | 性 名 | の ) の 属性 の 値 が [属性 値 の 部 ] を 含む 要素 | > | o | 〇 | 








要素 [ 属性 名 -=" 属性 値 "] と いう 書式 は 機能 的 に は クラ ス セ レク タ と まっ た く 同 じ で す が 、 ク ラ 
ス セ レク タ は Internet Explorer 6 で も 対応 し て いる の に 対し 、 属 性 セレ クタ は Internet Explorer 6 
で は 未 対応 と な っ て いま す 。 


CaAPTEE 6 CSS の 適用 先 の 指定 方 法 





ぁみ その 他 の 疑似 クラ ス Ilcsssi 



























































現時 点 で は まだ それ ほど 多く は 使わ れ て いな い 疑 似 ク ラス に は 、 次 の よう な も の が あり ます 。 
ドッ シル シル 適用 対象 1 コ : 選 園 | ゴ 細 還 | 
要 到 :nth-chi1d( 式 ) 先頭 か ら 〇 個 目 の 要素 か ら へ 個 お き に 適用 ※ ※ ※ 
間 第 hithelasichi)dt) 最後 か ら 〇 個 目 の 要素 か ら へ 個 お き に 適用 X と 3 X 
5 先頭 か ら 〇 個 目 の 要素 か ら へ 個 お き に 適用 (同じ 要素 名 | 、 
要素 :nth-of-type( 式 ) の 要素 の み 対 象 ) X X X 
2 最後 か ら 〇 個 目 の 要素 か ら へ 個 お き に 適用 (同じ 要素 名 | 
要素 :nth-1ast-of-type( 式 ) の 要素 の み 対 象 ※ ※ ※ 
要素 :first-chi1d 子 要素 の 中 で 最初 の 要素 2 間 dGDR(⑤) 
要素 :1ast-child 子 要素 の 中 で 最後 の 要素 に 3 ※ 党 
要素 :first-of-type 子 要素 の 中 で 最初 の 要素 (同じ 要素 名 の 要素 の み 対 象 ) X X 
要素 :1ast-of-type 子 要素 の 中 で 最後 の 要素 (同じ 要素 名 の 要素 の み 対 象 ) X X ※ 
要素 :only-child 唯一 の 子 要素 で ある 場合 に 適用 レ 4 メ < 
ーー な 会 同和 
本 楽 Spii1WaOf3EP EK (同じ 要素 名 の 要素 の み 有 
要素 :focus フォ ー カ ス (選択 ) さ れ た 状態 の 要素 に 3 2 (ED 
要 徐 :checked ラジ オ ボ タ ン や チェ ッ ク ボ ックス が チェ ッ ク さ れ た 状態 X メ X 
の 要素 
要素 :disabled 「disabled] の 状態 の 要素 ※ ※ ※ 
要素 :enabled 「disabled」 の 状態 で は な い 要 素 ※ ※ ※ 
要素 :root ルー ト 要 素 (html 要素 ) ※ ※ < 
1 
要素 :empty 要素 内 容 が 空 の 要素 X X ※ 
2 
っ URL の 最後 が 「# 〇 〇 〇 」 と な っ て いる リン ク を クリ ッ 
要素 :target ク し た 時 の 対象 要素 ※ X い 3 
要素 : ang( 言語 コー ド ) 「 言 語 コー ド 」 の 言語 に 設定 され て いる 要素 | SM ぬら 
要素 :not( セレ クタ ) 「 セ レク タ 」 の 対象 外 の すべ て の 要素 ※ メ 























ここ で 、 表 の 上 か ら 4 つの 疑似 タラ ス に ある 「 式 ] に つい て 説明 し て お きま し ょ う 。 
この 式 は 「 〇 個 目 か ら へ 個 お き ] と いう 情報 を 示す た め の も の で 、 基 本 的 に は 「an*b] と いう 形 
式 の 書式 で あら わし ます 。 こ の 書式 で は 、「n] は 0 か ら 1 ず つ 増 える 整数 と し て その まま 使い 、「a] 
と 「b] の 部 分 に 具体 的 な 整数 を 当て は め て 使用 し ます 。「a] と 「b] に は 負 の 整数 や 0 も 指定 で き 、 
値 が 0 と な る 場合 に は 表記 を 省略 する こと も 可能 で す ( た だ し 省略 で きる の は 「a] と 「b] の い ず 
れ か 一 方 の み )。 











た と えば 、「:nth-chi1d(2n+1 )] の よう に 指定 する と 、 最 初 は 「n] は 0 で す の で 「2x0+1 
テ 1」、 次 は 「n] は 1 と な っ て 「2x1 十 1 三 3]、 そ の 次 は 「n] は 2 と な っ て 「2x2 十 1=5]、 と 
いう よう に 奇数 個 目 (1 個 目 か ら 2 個 お き ) の 要素 に 適用 され る よう に な り ま す 。 

同様 に 、 偶 数 個 目 に 適用 し た い 場合 は 「:nth-chi1d(2n+0 )] また は 単に 「:nth-chi1d(2n)] 
の よう に 書く こと が で きま す 。 

また 、「an] 部 分 を 省略 し て 「b] だ け を 指定 し 、「:nth-chi1d(3)] の よう に 指定 する と 3 個 目 、 
「:nth-chi1d(5)] の よう に 指定 する と 5 個 目 の 要素 だ け に 適用 する こと が で きま す 。 


この 書式 の 数 値 を 変え る こと で 「 〇 個 目 か ら へ 個 お き ] の 要素 に 自由 に 適用 が 可能 と な り ま す が 、 
単純 に 「 奇 数 個 目 」「 偶 数 個 目 ] を あら わす 場合 に は 、 式 を 使わ ず に 「oddl「evenm] と いう キー ワ 
ー ド も 指定 で きる よう に な っ て いま す 。 こ れ ら の セレ クタ は 、 表 の 色 を 1 行 置き に 変え た い 場 合 な 
ど に 使用 する と 便利 で す 。 





HTML sample/chapter-06/lecture-6-2/01.html 





01 <p> こ れ は p 要 素 で す 。</p> 
02 <p> こ れ は p 要 素 で す 。</p> 
03 <p> こ れ は p 要 素 で す 。</p> 
04 <p> こ れ は p 要 素 で す 。</p> 
05 <p> こ れ は p 要 素 で す 。</p> 
06 <p> こ れ は p 要 素 で す 。 く </p> 





CSS sample/chapter-06/lecture-6-2/01-nth-child.css 





01 pinth-child(odd) { /* 奇数 個 目 */ 
02 color: white: 
03 background-color: gray: 


05 pinth-child(even) { /* 偶数 個 目 */ 
06 color: white: 
07 background-color: silver: 


09 pinth-chi1d(6) { /* 6 個 目 */ 
10 color: white: 
11 background-color: red: 




















inth-chi1d 疑 似 ク ラス の 使用 例 


CaAPrek 6 CSS の 適用 先 の 指定 方 法 




















pb 疑似 要素 lcssswl 


疑似 要素 と は 、 簡 単に 言え ば タグ の つけ られ て いな い 範 囲 (つま り HTML の 要素 に は な っ て いな い 
部 分 ) に 対し て CSS を 適用 する た め の セ レク タ で す 。 た と えば 、 あ る 要素 の 1 文字 目 だ け に CSS を 
適用 し た り 、HTML 上 で は 存在 し て いな い コ ン テ ン ツ を 追加 し て その 部 分 の 表示 指定 を する こと も 
で きま す 。CSS で コン テン ツ を 追加 する 方 法 に つい て は 、Chapter 10 で 解説 し ます が 、 疑 似 要素 
に 分 類 さ れる セレ クタ に は 次 の も の が あり ます 。 














は 3 りり E ま 3 

要素 ::first-11ne ブロ ッ ク レ ベル 要素 の 1 行 目 ( あ 叶 | 記 @ 叶 | 功 (⑯) 
| 要素 ::first-letter | フロ 2 レベ ル 要 素 の 1 文字 目 ー al oO | O oO _ 
要素 : :before 要 来 の 直前 に コン テン ツ を 追加 | ※ | ※ 〇 
要素 ::after 要 来 の 直後 に コン テン ツ を 追加 | x | x | O 














これ ら の 疑似 要素 の うち 、「:』:ffrst-11ne] と 「::first=letter」 に 関し て は 、 適 用 で きる 
要素 が ブロ ッ ク レ ベル 要素 に 限定 され て いる 点 に 注意 し て くだ さい 。 


実は CSS2.1 まで は 、 疑 似 要素 も 疑似 クラ ス と 同じ く 「:first-]inel「:first-]etter] と 書 
く こ と に な っ て いま し た 。CSS3 に な っ て か ら 、 疑 似 ク ラス と 明確 に 区 別 で きる よう に する 目的 で 、 
疑似 要素 に は コロ ン を 2 つつ ける こと に な っ た の で す 。 そ の た め 、CSS2.1 と の 互換 性 を 維持 する 
目的 で 、 ブ ラウ ザ は コロ ン を 1 つ し か つけ て いな しい 疑似 要素 に も 対応 する こと に な っ て いま す 。 
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と その 他 の 結合 子 lcssswl 


Internet Explorer 6 が 未 対応 だ っ た た め 、 こ れ ま で は それ ほど 使わ れ て こ な か っ た 結合 手 に は 、 次 


の も の が あり ます 。 





1 ゴ 4 





1 に 1 











「 セ レク タ 1] の 直接 の 子 要素 で ある 「 セ レク タ 2] の 要素 


共通 の 親 要素 を 持つ 要素 の 中 で 「 セ レク タ 1] の 直後 に あ 
ら わ れる 「 セ レク タ 2] の 要素 


共通 の 親 要素 を 持つ 要素 の 中 で 「 セ レク タ 1] より も 後に 
あら われ る 「 セ レク タ 2] の 要素 





セレ クタ 1 > セレ クタ 2 












セレ クタ 1 + セレ クタ 2 












セレ クタ 1 - セレ クタ 2 
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セレ クタ の 組み 合せ 方 


セレ クタ は 単独 で 使う だ け で は な く 、 組 み 合わ せ て 使う こと も で きま す 。 組 み 合わ せ 方 に よっ 
て さま ざま な 指定 が 可能 で す 。 


と > セレ クタ の 基本 単位 


セレ クタ の 種類 が 一 通り 分 か っ た と ころ で 、 次 に それ ら の 組み 合せ 方 の ルー ル に つい て 説明 し ます 。 
は じ め は セレ クタ の 基本 単位 (最小 構成 ) と な る 部 分 の 組み 合わ せ の ルー ル か ら で す 。 セ レク タ の 
基本 単位 は 、 疑 似 要素 と 結合 子 以外 の セレ クタ で 構成 され ます 。 

基本 単位 の 先頭 に は 、 か な ら ず タイ プ セ レク タ ( 要 素 名 ) また は ユニ バー サル セレ クタ (*) の いずれ 
か を 1 つ 配 置 する 必要 が あり ます 。 も ちろ ん 、 そ の あと に 何 か が 続く 場合 は ユニ バー サル セレ クタ 
を 省略 で きま す 。 あ と は それ に 続け て クラ ス セ レク タ ・ID セ レク タ ・ 疑 伺 ク ラス ・ 属 性 セレ クタ の 
うち の 必要 な も の を 必要 な 数 だ け 順 不同 で 連結 させ た も の が セレ クタ の 基本 単位 と な り ま す 。 











タイ プ セ レク タ クラ ス セ レク タ 
1 ID セレ クタ 
赤 信 
疑似 クラ ス 


ユニ バー サル セレ クタ 属性 セレ クタ 





先頭 に は と ちら か 一 方 を 1 づつ 指定 必要 な 数 だ け 順 不同 で 連結 させ て 指定 
プ 




















あぷ 基 本 単位 の 組み 合せ 方 

セレ クタ の 基本 単位 は 、 結 合 子 で 区 切っ て いく つ で も 指定 で きま す 。 結 合 子 の 前 後に は 、 半 角 ス 
ペー ス ・ 改 行 ・ タ ブ を 自由 に 入れ る こと が で きま す 。 疑似 要素 は 、 セ レク タ 全 体 の 最後 尾 に 1 つ だ 
は 指定 する こと が で きま す 。 


12! 








指定 が 競合 し た 場合 の 優先 順位 


さて 、 実 際 の 制作 に お いて CSS に よる 長い 表示 指定 を し て いる と 、 ど こ か で すでに 表示 指定 
を し て いる に も か か わら ず 重 複 する 指定 を し て し まう こと が あり ます 。 こ れ は 複数 人 に よる チ 
ー ム で CSS を 指定 し て いる 場合 や 途中 で 担当 者 が 変わ っ た 場合 な ど に よく 起こ り ま す 。 そ の 
よう な と き 、 同 じ 適用 先 に 対し て 異な る 表示 指定 が ある と 、 ど うな っ て し まう の で し ょ うか ? 
実際 に は 、CSS に は 競合 し た 指定 の 優先 順位 を 決め る た め の ル ー ル が あり 、 そ れ に は セレ ク 
タ も 大 きく 関係 し て いま す 。 こ こ で は 、 そ の ルー ル に つい て 詳し く 説明 し て お きま す 。 


ぁ 優先 順位 の 決定 方 法 


同じ 適用 対象 に 対し て 、 複 数 個所 で 異な る 表示 指定 が され た 場合 、CSS で は 基本 的 に 次 の ルー ル 
で 優先 され る 指定 を 決定 し 適用 し ます 。 


1.!1mportant の つい て いる 指定 は 最 優先 
2. 使用 し て いる セレ クタ の 種類 か ら 優先 度 を 計算 
3. 計算 結果 の 優先 度 が 同じ な ら 後 の 指定 を 優先 


まず 、CSS の 宣言 (「 プ ロ パ ティ 名 : 値 」 の 部 分 ) の うし ろ に 「 員 POPtant] と 書い て お く と 、 そ 
の 指定 が 最 優先 され ます 。 た と えば 、 次 の 例 の 3 つの 中 で は 、 真 ん 中 の 指定 が 優先 され る こと に な 
り ま す 。 


p { color: red: } 
p { color: green !important: ] ペーーー この 指定 が 優先 され る 
p { color: blue: } 


「!1mportant] が つけ られ て いる 指定 が 優先 し て 適用 され る 


「!1mportant] が つけ られ て いな か っ た り 、「!1mportant] が 複数 個所 に つけ られ て いる 場合 
は 、 そ の 優先 順位 を セレ クタ の 種類 か ら 導 き 出 すこ と に な り ま す 。 こ れ に つい て は 、 次 の 「 セ レク 
タ か ら の 優先 度 の 計算 方 法 ] で 、 そ の 計算 方 法 を 詳し く 説明 し ます 。 


セレ クタ で 計算 し て も 結果 的 に 優先 順位 が 同じ に な っ て し まっ た 場合 は 、 よ り 後 か ら の 指定 の 方 が 
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優先 きれ る こと に な り ま す ( つ まり 、 優 先 順位 が 同じ で あれ ば 、 後 か ら の 指定 が 前 か ら の 指定 を 上 
書き する と いう こと で す )。 


CO たり WW 


「!1important] は ユー ザー スタ イル シー ト で も 使用 で きる 


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ニ ーー ーー ニー・ 


Web ペ ー ジ を 制作 する 際 に は それ ほど 気 に す る 必要 も な い の で す が 、CSS は Web ペ ー ジ の 制作 者 だ 
け で な く 、 ユ ー ザ ー か ら も 指定 で きる よう に な っ て いま す ( 多 く の ブ ラウ ザ は ユー ザー が 指定 し た CSS 
ファ イル を 読み 込め る よう に な っ て お り 、 そ の よう な CSS フ ァイル は ユー ザー スタ イル シー ト と 呼ば 
れ て いま す )。 さ ら に 、 制 作者 が 特に CSS を 指定 し な く て も 、 ブ ラウ ザ は HTML を それ な り に 内 容 が 
分 か る よう に 表示 し ます が 、 そ れ は ブラ ウザ が デフ ォ ル ト の CSS (また は 結果 的 に その よう に な る 仕 
組み ) を 持っ て いる か ら で す 。 つ まり 、CSS は 「 制 作者 ]「 ユ ー ザ ー」「 ブ ラウ ザ 」 と いう 三 者 の あい だ 
で も 競合 する 可能 性 が ある と いう こと で す 。 そ の 三 者 に お ける 優先 順位 は 次 の よう に な っ て いま す 。 


1. ユー ザー の CSS (!1mportant つ き ) 
2. 制作 者 の CSS (! 1mportant つ き ) 
3. 制作 者 の CSS 

4. ユ ー ザ ー の CSS 

5. ブラ ウザ の デフ ォ ル ト CSS 


実は 「!1mportant] は ユー ザー の CSS で も 使用 で き 、 ユ ー ザ ー ス タイ ル シ ー ト 内 で それ を 使っ た 
場合 が も っ と も 優先 度 が 高く な り ま す 。 こ れ は た と えば 視覚 障害 の ある 人 の 「 背 景 を 暗く 、 文 字 色 を 
明る くし な いと 見 え に く い 」 と いっ た ニー ズ に 応え る こと が で きる よう に する た めで す 。 
「!1mportant] を 使わ な い 場 合 は 、 制 作者 の CSS が 最 優先 で 適用 され ます 。 


みゆ > セレ クタ か ら の 優先 度 の 計算 方 法 


続け て 、 セ レク タ か ら 優 先 順位 を 計算 する 方 法 を 説明 し まし ょ う 。 し か し その 前 に 、CSS に は セ 
レク タ の な い 指 定 が あっ た こと も 思い 出し て くだ さい 。 それ は style 属性 の 値 と し て CSS の 宣言 間 
分 だ け を 指定 する 場合 で す 。 実 は この セレ クタ の な い 指 定 が 、 セ レク タ に よる 優先 順位 と し て は も 
っ と も 高く な り ま す 。 


style 属 性 に よる 指定 で は な く 、 セ レク タ が 指定 され て いる 場合 の 優先 順位 の 計算 方 法 は 次 ペー ジ 
の 図 の 通り で す 。 簡単 に 言え ば 、 セ レク タ を 構成 する 各部 分 を 種類 別に 分 類 し て 数 を 数 え 、 そ れ 


に か) 
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* ヨ ユ ば マロ y 








に よっ て 作ら れ た 93 桁 \? の 数 字 が 大 きい 方 が 優先 順位 が 高く な る 、 と いう こと で す 。 見 る と 分 か 
る よう に 、3 桁 目 は ID セレ クタ 、2 桁 目 は id 属性 以外 の 属性 関連 セレ クタ 、1 桁 目 は 要素 関連 セレ 
クタ と な っ て いて 、ID セ レク タ を 使う と 優先 度 が 高く な る こと が 分 か り ま す 。 





3 桁 目 2 桁 目 1 桁 目 


クラ ス セ レク タ (. 〇 〇 〇 ) の 数 
十 タイ プ セ レク タ ( 要 素 名 ) の 数 


ID セレ クタ いい 〇 ) の 数 属性 セレ クタ ([ 〇 〇 〇 ]) の 数 十 
0 疑似 要素 (:: つつ) の 数 
疑似 クラ ス (: 〇 〇 〇 ) の 数 














セレ クタ か ら 優 先 順位 を 計算 する 方 法 。 こ の 3 桁 の 数 字 が 大 きい ほど 優先 順位 は 高く な る 


な お 、 こ の 計算 に お いて は 、 ユ ニ バ ー サ ル セ レ クタ ( ょ ) は 無視 され ます 。 ま た 、 疑 伺 ク ラス の うち 
「:not( )] は 、( ) 内 の セレ クタ は ほか の 部 分 と 同じ よう に カウ ント され ます が 、「:not()] 自身 
は 疑似 クラ ス と し て は カウ ント され ませ ん 。 


※10 : この 3 桁 の 数 字 の 各 桁 は 、 た と え 該当 する セレ クタ が 10 個 以上 あっ た 場合 で も 、 決 し て 繰り 上 が ら な いも の と し て 考え る こ 
と に な っ て いま す ( つ まり 、 普 通 の 10 進 数 で は な いと いう こと で す )。 し た が っ て 、2 桁 目 に 該当 する クラ ス セ レク タ が た と 
え 100 個 あっ た と し て も 、ID セ レク タ が 1 つ 入 っ て いる セレ クタ の 方 が 優先 度 は 高く な り ま す 。 
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「 ペ ー ジ 全体 の 枠組み 」 と その 内 容 と な る 「 テ キス ト 」 に つい 
て は すでに 学習 し まし た の で 、 ここ で は ペー ジ を 構成 する 各 
部 分 の 枠組 み ・ 領域 を 作る た パテ ィ を 紹介 し 
て いき ます 。 また 、 テ キス 「 以 外 の コン テン ッ ( 画 像 ・ 動画 
+。 PAC た WO 還 Eoucezc ea 


o 








基本 構造 を 示す 有 要素 


まず 最初 に 、 ペ ー ジ 内 の 基本 的 な 構造 を つく る 要素 と し て 、 章 、 節 、 項 の よう な 大 き な 桁 組 
み の 範 囲 を 表す 要素 や 、 ヘ ッ ダ ー、 フ ッ タ ー の よう な 領域 を 示す た め の 要 素 な ど を 紹介 し ます 。 


セク ショ ン に つい て 


HTML5 より も 前 の HTML・XHTML に お いて は 、 見 出し を あら わす 要素 (h1 一 h6) は 用 意 さ れ て い 
まし た が 、 章 ・ 節 ・ 項 の よう な 範囲 を 明確 に 示す た め の 要 素 や ルー ル は 用 意 さ れ て いま せん で し た 。 
その た め 、 章 や 節 な どの 範囲 は 、 見 出し の 階層 な どか ら 推 測 す る こと し か で きま せん で し た 。 


HTML5 か ら は 、 章 ・ 節 ・ 項 な どの 範囲 (セクション) を 示す た め の 新 し い 要 素 と ルー ル が 導入 され 
て いま す 。 セ クシ ョ ン の 範囲 を 示す 要素 を 使用 する と 、 セ クシ ジョ ン の 範囲 が 明確 に 分 か る だ け で な 
く 、 そ の 親 隆 関係 (「 章 ] の 中 に 別 セ クシ ョ ン が あれ ば 「 節 | と 判断 で きる な ど ) も 明確 に な り ま す 。 
また 、 必 ず し も セク ショ ン の タグ が つけ られ て いな く て も セク ショ ン の 範囲 が 分 か る よう に 、 次 の 
よう な ルー ル も 導入 され まし た 。 


ぁみ ゆ > セク ショ ン 見 出し の ルー ル 


まず 、 セ クシ ョ ン の 先頭 に ある 見 出し は 、 そ の セク ショ ン の 見 出し と な り ま す 。 そ し て 、 次 の 見 出 
し が あら われ た と き に 、 見 出し の 階層 が 前 の 見 出し と 同じ か それ より 上 で あれ ば その 直前 で 前 の セ 
クシ ョ ン は 終了 し 、 新 し い 見 出し と と も に 新しい セク ショ ン が は じ ま っ て いる も の と 判断 し ます 。 
見 出し の 階層 が 前 の 見 出し より も 下 で あっ た 場合 は 、 そ こ か ら ( 前 の セク ショ ン に 含ま れる ) サ プ セ 
クシ ョ ン が は じ ま る も の と 判断 し ます 。 


この よう な ルー ル が で きた た め 、 た と えば 見 出し を 主題 と 副題 の よう に わけ て h1 要 素 と h2 要素 を 
連続 し て 使っ た よう な 場合 で も 、2 つ の セク ショ ン が 開始 され る こと に な っ て し まい ます 。 
Chapter 5 で 登場 し た hgroup 要 素 は 、 そ の よう な 場合 で も セク ショ ン が 1 つ し か 開始 され な いよ 
うに する た め に 、 見 出し を グル ー プ 化 で きる よう に する 目的 で 用 意 さ れ た も の な の で す 。 





と > セク ショ ン と 見 出し の 使い 分 け 


この よう な 新しい 要素 と ルー ル の 導入 に より 、 セ クシ ョ ン 関 連 要素 を 適切 に 使用 し て いれ ば 見 出し 
の レベ ル に 関係 な く 章 ・ 節 ・ 項 な どの 親子 関係 が 分 か り 、 逆 に セク ショ ン 関 連 要素 を 使っ て いな く 
て も 適切 な 階層 の 見 出し を 使用 し て いれ ば セク ショ ン の 範囲 と 親子 関係 を 明確 に 示す こと が で きる 
よう に な り ま し た 。 し か し 、 セ クシ ョ ン の 範囲 に は セクション を 示す タグ を 明示 的 に つけ 、 見 出し 
に つい て は それぞれ の 階層 に 合わ せ た 適 切な レベ ル の 見 出し を 使う か 、 ま た は h1 要 素 だ け を 使用 
する こと が 推奨 され て いま す 。 


セク ショ ン を あら わす 要素 | HTMLs 新 | 











HTML5 で は 、 セ クシ ョ ン の 範囲 を 示す 要素 は 全部 で 4 種類 あり ます が 、 こ こ で は その うち の 3 つ 
を 紹介 し ます (残り の 1 つ は ナビ ゲー ショ ン の セク ショ ン を 示す た め の 専 用 要素 で 詳し く は 
「Chapter 8 ナビ ゲー ショ ン 」 で 解説 し ます )。 





要素 名 | 意味 

section セク ショ ン | 
| article 。 | 内 容 が それ だ け で 完結 し て いる セク ショ ン | 
| 際 We 主 コン テン ツ に は 含ま れ な い セク ショ ン 





HTML5 の セク ショ ン を あら わす 要素 


section 要 素 は 、 そ の 範囲 が 一 般 的 な 章 ・ 節 ・ 項 な ど ( つ まり 普通 の セク ショ ン ) で ある こと を 示す 
要素 で す 。article 要 素 は 、 セ クシ ョ ン の 中 で も それ だ け で 完結 し て いる (独立 し た ) も の に 対し て 
使用 され ます 。 た と えば 、 新 聞 や 雑誌 な どの 記事 、 ブ ログ の 記事 、 ユ ー ザ ー に よる ブロ グ 記 事 へ 
の コメ ント な ど が これ に 該当 し ます 。aside 要 素 は 、 そ の ペー ジ の メイ ンコ ン テ ン ツ に は 含ま れ な 
い 補足 記事 、 広 告 、 一 部 抜粋 を 使っ た 記事 の 紹介 文 な どの 範囲 に 対し て 使用 され ます 。 


基本 構造 を 示す その 他 の 要素 


セク ショ ン の 範囲 を あら わす わけ で は あり ませ ん が 、 ペ ー ジ 内 (セク ショ ン 内 ) で 基本 構造 を 示す 要 
素 に は 、 次 の も の が あり ます 。 


レコ 





ー 
ェ 
ゃ 
ゴ 
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か 
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CaApre ょ デ 





header 





footer フッ ター | 
address | 問い 合わ せ 先 
これ ら も HTML5 の 基本 構造 を 示す 要素 で は ある が 、 そ の 範囲 キ セ ク ショ ン に は な ら な い 











ぁみ header 要 素 rurs 新 | 


header 要 素 は 、 い わ ゆ る ヘッ ダー 的 な 部 分 の 範囲 を 示す た め に 使用 され る 要素 で す 。 一 般 的 に は 、 
セク ショ ン の 見 出し の ほか 、 導 入 文 的 な テキ スト や ロゴ 画像 、 検 索 フ ォ ー ム 、 セ クシ ョ ン 内 の 目次 
な ど を 含む 範囲 に 対し て 使用 され ます 。 こ の 要素 内 に は 、 ほ か の header 要 素 お よび footer 要 素 を 
入れ る こと は で きま せん の で 注意 し て くだ さい 。 


ぁ ぁ footer 要 素 ruts 条 | 


footer 要 素 は 、 い わ ゆ る フッ ター 的 な 部 分 の 範囲 示す た め に 使用 され る 要素 で す 。 こ の 要素 を 
囲う も っ と も 近い セク ショ ン の フッ ター と な り ま す 。 一 般 的 に は 、 記 事 を 書い た 人 の 名 前 や 関連 す 
る 内 容 へ の リン ク 、Copyright の テキ スト な ど を 含む 範囲 に 対し て 使用 され ます 。 索 引 や 奥付 、 使 
用 許諾 、Appendix な どの 場合 は 、 セ クシ ョ ン の 内 容 全 体 が footer 要 素 と な る 場合 が あり ます 。 多 
く の 場 合 、 こ の 要素 は セク ショ ン 内 の 最後 に 配置 され ます が 、 必 ず し も その 必要 は な く 、 セ クシ ョ 
ン 内 の 最初 に 配置 し て も か まい ませ ん 。 こ の 要素 内 に も 、 ほ か の header 要素 お よび footer 要 素 を 
入れ る こと は で き な い 点 に 注意 し て くだ さい 。 


ぁ pb address 要素 


address 要 素 は 、 多 く の 場 合 footer 要 素 内 で 使用 され 、 そ の 部 分 が 問い 合わ せ 先 (連絡 先 ) で ある 
こと を 示し ます 。 article 要素 内 に 入れ られ て いる 場合 は その セク ショ ン に 関す る 問い 合わ せ 先 と な 
り 、 そ う で な けれ ば ペー ジ 全 体 の 問い 合わ せ 先 と な り ま す 。 要素 名 は address で す が 、 住 所 を 示 
すず だめ の 要素 で は ほ は ない 点 に 注意 し て くだ さい (も ちろ ん 問い 合わ せ 先 の 1 つと し て 住所 を 入れ て も 
か まい ませ ん が 、 単 純 に 住所 部 分 を マー クア ッ プ する だ け な ら p 要 素 を 使用 し て くだ さい )。 ま た 、 
Copyright の テキ スト や 更新 日 な どの 情報 は 問い 合わ せ 先 で は あり ませ ん の で 、address 要素 内 に 
は 入れ な いで くだ さい 。 こ の 要素 内 に 入れ られ な い 種 類 の 要素 と し て は 、 header 要素 ・footer 要 素 ・ 
address 要素 の ほか 、 見 出し と セク ショ ン が あり ます 。 














01 <footer> 

く address> 

お 問い 合わ せ 先 : 

04 く a href="mailto:info@example.jp"> 山 田 く /a> 

| 05 く /address> 

| 0 く <P> 

| 07 < く small>&coDy: 
08 </p> 

09 </footer> 


footer 要 素 と address 要素 の 使用 例 














copyright 2012 Example. く /smal1> 


COLVAM の 


HTML5 の 新 要素 を 古い IE に 認識 させ る 方 法 


実は 、HTML で 新しく 追加 され た section 要 素 や article 要素 、aside 要素 、header 要素 、footer 要 素 
と いっ た 要素 は 、Internet Explorer の バー ジョ ン 8 以 前 で は 要素 と し て 認識 され ませ ん 。 そ の た め 
それ ら の 要素 に CSS を 指定 し て も 一 切 適用 され な い の で す 。 


し か し 、JavaScript を 使用 し て 新しい 要素 ご と に 「document.createElement(' 要素 名 ):| の よう に 
指定 する と 、 古 い Internet Explorer で も 新 要素 が 認識 され 、CSS も 適用 され る よう に な り ま す 。 こ の 
よう な JavaScript の ソー スコ ー ド は も ちろ ん 自分 で 書い て も OK な の で す が 、 多 く の 人 が 何 度 も 検証 
し て 修正 を 重ね て きた 問題 の な か い オ ー プ ン ソ ー ス の ソー スコ ー ド が 「http://code.google.com/p/ 
htmlSshiv/| で 公開 され て お り 、 自 由 に ダウ ン ロ ー ド し て 使え る よう に な っ て いま す 。 使い 方 は 、 ダ 
ウン ロー ド し た ファ イル の 中 に 含ま れ て いる 「html5shivjs] を サー バー に アッ プロ ー ド し 、 次 の ソー 
スコ ー ド を HTML フ ァイル の head 要素 内 に 書い て お くだ け で け で す ( 青 で 示し た 部 分 は 「html5shiv. 
js] を 入れ た 階層 まで の パス に 変更 し て くだ さい )。 な お 、 こ の ファ イル の 使用 方 法 は 変更 され る こと 
が あり ます の で 、 実 際 に 使用 する 場合 は サイ ト に 掲載 され て いる 使用 方 法 を 確認 し て くだ さい 。 





| 1 -if It TE 91> 
| 02 2 src=" 一 /htm15shiv.js"> く /script> 
| 03 <![endif]-- 





[html5shivjs] を サー sd に 入れ 、 この ソー 55 司 避 ド を head 要 素 内 に 書い て お くだ け で 、 二 い IE で も HTML5 の 新 要素 を 
認識 する よう に な る 
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で ヨ エ マロ] 








画像 ・ 動 画 ・ 音 声 関連 要素 


構造 や 枠 得 み を あら わす 要素 で は あり ませ ん が 、 こ こ で 画像 や 動画 、 音 声 お どの ファ イル を 
Web ペー ジ 内 に 組み 込む た め の 要 素 も 紹介 し て お きま す 。 











みゆ img 要素 


は じ め は 、Web ペー ジ に 画像 を 組み 込 お ため の img 要 素 の から で す 。 こ の 要素 は 、 要 素 内 容 の な い 
空 要素 で 、 表 示さ せ た い 画像 の URL を src 属 性 で 指定 する と 画像 が 表示 され る よう に な り ま す 。 さ 
ま ざ ま な 形式 の 画像 を 表示 させ られ ます が 、 一 般 的 に は PNG 形式 、JPEG 形式 、GIF 形 式 が 使用 
され て いま す 。 


上 at 属性 に つい て 


属性 に は 、 画 像 が 正しく ロー ド で き な か っ た 場合 や 、 そ も そ も 画 像 を 表示 する こと が で き な い 
音声 や 点字 な どの 環境 で 利用 する 、 画 像 の 代わ お り の テキ スト を 指定 し ます 。 こ こ で 指定 する の は 、 
あく まで "画像 の 代わ り " と し て 使用 する テキ スト で あっ て 、 画 像 の 説明 を する た め の テ キス ト で 
は な い 点 に 注意 し て くだ さい (つま り 、 画 像 が 表示 され な い 状 態 で それ が どん な 画像 な の か を 説明 
する テキ スト で は な く 、 画 像 の 代わ り と し て 機能 する テキ スト を 入れ る と いう こと で す )。 画像 に 
関す る 説明 や 補足 情報 な ど を 含め た い 場 合 に は 、 グ ロー バル 属性 の title 属 性 を 使用 し ます 。 


HTML5 より も 前 の HTML/XHTML で は 、 alt 属 性 を 指定 する こと は 必須 と され て いま し た 。 し か し 、 
HTML5 で は 不要 と 考え られ る 場面 に お いて は 、img 要素 に alt 属 性 を つけ る 必要 は あり ませ ん 。 





img 要素 に 指定 で きる 属性 


・src=" 画像 の URL" ※ 必 須 
表示 させ る 画像 の URL を 指定 し ます 。 


・alt=" 代替 テキ スト " 
画像 が 表示 で き な い 場合 に 、 そ の 代わ り と し て 使用 する テキ スト を 指定 し ます 。 


・width=" 幅 " 
画像 の 幅 (実際 の 幅 で は な く 表 示さ せる 幅 ) を ビク セル 数 (単位 を つけ な い 整 数 ) で 指定 し ます 。 


・height=" 高 さ " 


画像 の 高 さ (実際 の 高 さ で は な く 表 示さ せる 高 さ ) を ピク セル 数 (単位 を つけ な い 整 数 ) で 指定 し 
ます 。 


| 01 <h1> 
02 <jmg src="1ogo.g1f" a1t=" 株 式 会 社 マ イナ ビ " width="250" height="200"> 
03 </h1> 


img 要 素 の 使用 例 











img 要 素 の 表示 例 





動画 と 音声 irmwsmi 





ぁ ゆ video 要素 と audio 要素 


次 に 、 動 画 を 組み 込む video 要素 と 音声 を 組み 込む audio 要素 に つい て 説明 し ます (source 要素 に 
つい て は この あと に 解説 し ます )。 両 者 に は 共通 する 属性 も 多く 、 動 画 や 音声 の デー タ は src 属 性 
で 指定 し ます 。 要 素 内 容 に は 、 こ れ ら の 要素 に 未 対応 の ブラ ウザ で 表示 させ る メッ セー ジ を 入れ ま 





マヨ エゴマ ロ う 











す ( し た が っ て 、video 要 素 ・audio 要素 に 対応 し た ブラ ウザ で は 要素 内 容 は 表示 され な いよ うに な 
っ て いま す )。 


| 動画 を 組み 込む 
| 音声 を 組み 込む ミニ 
SourCce | 動画 や 音声 の 代替 デー タ を 指定 する 


動画 と 音声 を 組み 込む た め の 要 素 








video 要素 と audio 要素 に 指定 で きる 属性 の 中 に は 、「 属 性 名 =" 属性 値 "| の 形式 を と ら ず 、「 属 性 
名 ] だ け で 指定 で きる も の が あり ます 。 そ の よう な 属性 の こと を 論理 属性 と 言い ます 。 論 理 属性 の 
値 は 論理 値 true] また は 「fa]lse] の いずれ か で 、 属 性 を 指定 する と 「true] に な り 、 指 定 
し な けれ ば 「fa]lse] と な り ま す 。 ち ょ っ と 難し い 話 に な っ て きま し た が 、 分 か りや すく 言え ば 
「true] と 「false] は 「Yes] と 「No] の よう な も の で 、controls 属 性 を 指定 すれ ば コン トロ 
ー ラ ー が 表示 され 、Ioop 属 性 を 指定 すれ ば ルー プ 再 生 さ れる よう に な り ま す 。 それら を 指定 し な 
けれ ば 、 コ ント ロー ラー は 表示 され ず 、 ル ー プ 再生 も され な い 状 態 と な り ま す 。 


論理 属性 は 「controls] の よう に 属性 名 だ け で 指定 する 形式 の ほか に 、「controls= 
"controls"] の よう に 属性 値 に 属性 名 を その まま 入れ て も 有効 で すし 、「controls=""」 の 要 
に 値 を 空 に し て 指定 する こと も で きま す 。 


video 要素 に 指定 で きる 属性 


・src=" 動画 の URL" 
表示 させ る 動画 の URL を 指定 し ます 。 


・width=" 幅 " 
動画 の 幅 (実際 の 幅 で は な く 表 示さ せる 幅 ) を ピク セル 数 (単位 を つけ な い 整 数 ) で 指定 し ます 。 


・height=" 高 さ " 
動画 の 高 さ (実際 の 高 さ で は な く 表 示さ せる 高き さ ) を ピク セル 数 (単位 を つけ な い 整 数 ) で 指定 し 
ます 。 


・poster=" 画像 の URL" 
動画 が 再生 で きる よう に な る まで の 間 に 表 示さ せ て お く 画 像 の URL を 指定 し ます 。 


・controls 
動画 の 再生 ・ ポ ー ズ ・ ボ リュ ー ム 調整 な ど を お こ な う コン トロ ー ラ ー 部 分 を 表示 し ます 。 


・autoplay 
途中 で 止ま ら ず に 再生 を 続け られ る 程度 の デー タ を 読み 込ん だ 段階 で 、 自 動 的 に 再生 を 開始 し 
ます 。 








video 要素 に 指定 で きる 属性 (続き ) 


・1oop 
動画 を ルー プ 再 生 し ます 。 


・muted 
音 を 消し た 状態 で 再生 し ます 。 


audio 要素 に 指定 で きる 属性 


・SsTc=" 音声 デー タ の URL" 
音声 デー タ の URL を 指定 し ます 。 


・Ccontrols 
音声 デー タ の 再生 ・ ポ ー ズ ・ ボ リュ ー ム 調整 な ど を お こ な う コン トロ ー ラ ー 部 分 を 表示 し ます 。 


・autoplay 
途中 で 止ま ら ず に 再生 を 続け られ る 程度 の デー タ を 読み 込ん だ 段階 で 、 自 動 的 に 再生 を 開始 し 
ます 。 


・1ooDp 
音声 デー タ を ルー プ 再 生 し ます 。 


・muted 
音 を 消し た 状態 で 再生 し ます 。 


テコ 
マヨ ユ 4y ロ う 


sample/chapter-07/lecture-7-2/01.html 


< く video src="bear.mp4" controls> 
く p>HTML5 に 対応 し た ブラ ウザ で は 動画 が 再生 で きま す 。 く </p> 
く /video> 


video 要素 の 使用 例 




















video 要素 の 表示 例 
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と source 要素 


video 要素 また は audio 要素 の src 属 性 で デー タ を する 場合 は 、1 つ の デー タ し か 指定 で きま せん 。 
予備 と し て ほか の 形式 の デー タ も 指定 し て お きた い 場 合 に は 、video 要 素 また は audio 要素 の src 
属性 を 使用 せ ず に 、 要 素 内 容 と し て source 要素 を 組み 込ん で デー タ を 指定 し ます 。source 要 素 は 
いく つ で も 指定 で き 、 よ り 先 に 指定 され て いる デー タ で 再生 可能 な も の が 再生 され ます 。 source 
要素 は 要素 内 容 の な い 空 要素 で 、video 要素 また は audio 要素 内 の その 他 の コン テン ツ よ り も 前 に 
配置 する 必要 が あり ます 。 


source 要素 に 指定 で きる 属性 


・src=" デー タ の URL"  ※ 必 須 
再生 する デー タ の URL を 指定 し ます 。 


・type="MIME タ イプ " 
再生 する デー タ の MIME タイ プ を 指定 し ます 。 


sample/chapter-07/lecture-7-2/02.html 


| 01 <video controls> 

| 02 く source Src="bear.mp4" type="v1deo/mp4"> 
03 く source Src="bear.ogv" type="video/ogg"> | 
04 <p>HTML5 に 対応 し た ブラ ウザ で は 動画 が 再生 で きま す 。</p> | 
05 </video> 

source 要素 の 使用 例 





CuAP て Ek デ ページ 内 の 構造 








ボッ クス 関連 プロ パテ ィ 


さて 、 こ こ か ら 話 は CSS へ と 変わ り ま す が 、 こ こ か ら 説 明 す る 内 容 は CSS の 中 で も 主要 な 部 
分 を 構成 する も の で す 。 登場 する プロ パテ ィ の 数 が 少し 多め で す が 、 整 理 し て 考え る と 基本 
的 な 部 分 で は 意外 と シン プル な パタ ー ン に 沿っ て 作ら れ て いま す の で 、1 つ ずつ し っ か り と 覚 
えて いき まし ょ う 。 





ボッ クス と は ? 











ここ まで の 解説 や サン プル で は 、 た と えば 背景 の 指定 を する 場合 で も 、 そ れ が 表示 され る 領域 の 
範囲 や 境界 に つい て は 具体 的 に 触れ ませ ん で し た 。 こ こ で は まず 、 各 要素 に 確保 され る 表示 領域 
と その 境界 線 、 余 白 に つい て 説明 し 、 そ の あと で それ ら を 調整 する た め に 大 量 に 用 意 さ れ た プロ パ 
ティ “を 紹介 し て いき ます 。 


人 
ゴ ヨ ユマ アロ) 


ぁみ ボッ クス の 構造 


HTML の 各種 要素 に は 、 改 行 を お こ な 
うた め の br 要 素 の よう な 一 部 の 例外 を 
除き 、 ボ ックス と 呼ば れる 四角 い 領 域 
が 用 意 さ れ ま す 。 す べ て の ボッ クス は 
共通 し て 、 右 図 の よう な 構造 に な っ て 
いま す 。 





ボッ クス の 構造 


※11 : ここ で 紹介 する ボッ クス 関連 の プロ パテ ィ は 、 全 部 で 50 近 く あ り ま す 。 と は いっ て も 、 た と えば 余白 で も 上 用 ・ 下 用 ・ 左 用 ・ 
右 用 ・ 上 下 左右 の 一 括 指定 用 と いう よう に 同じ 機能 で 細か く 別 れ て いる た め に 数 が 多く な っ て いる だ け で す の で 安心 し て く 
だ さい 。 
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まず 、 ボ ックス に は 要素 内 容 (テキ スト な ど ) を 表示 する た め の 領域 が 用 意 さ れ ま す 。 図 で は も っ と 
も 内 側 の 点線 で 示さ れ た 部 分 で す 。 そ し て 、 そ の まわ り に は ボー ダー と 呼ば れる 境界 線 を 表示 させ 
る こと が で きる の で す が 、 そ の 内 側 と 外側 の 両方 に 余白 を と る こと が で きま す 。 ボ ー ダ ー の 内 側 の 
余白 は パ デ ィ ン グ と 言い 、 外 側 の 余白 は ママ ニー ジン と 言い ます 。 こ れ ら の 境界 線 と 余白 は 、 上 下 左 
右 別々 に その 幅 を 指定 する こと が で きま す 。 実は 、CSS で 指定 し た 背景 が 表示 され る の は 、 こ の 
ボー ダー の 領域 まで で 、 マ ー ジ ン 部 分 は 常に 透明 と な り ま す 。 ボ ー ダ ー は 常に 背景 の 上 に 表示 さ 
れる た め 、 ボ ー ダ ー の 領域 に 背景 が 表示 され る の は ボー ダー を 透明 や 半 透 明 に し た と き や 、 点 線 
の よう に 線 の 間 に 隙 間 が ある 線 種 に 設定 し た 場合 な ど に 限ら れ ま す 。 


ぁみ ボッ クス の 初期 状態 


な お 、 名 種 要素 の ボッ クス の 初期 状態 は 、 要 素 の 種類 や ブラ ウザ の 種類 に よっ て 異な り ま す 。 た 
と えば 、 一 般 的 な ブラ ウザ で は 、p 要 素 に は 最初 か ら 一 行 ぶん 程度 の 上 下 の マ ー ジ ン が 設定 され て 
いま す が 、div 要 素 の マー ジン は まっ た く 無 い 状態 と な っ て いま す 。 こ の よう に 要素 や ブラ ウザ の 
種類 に よっ て ボッ クス の 初期 状態 が 違っ て いる の は 、Chapter 6 で 説明 し た 「 ブ ラウ ザ の デフ ォ ル 
ド CSS」(p.123 参照 ) と いう も の が ある か ら で す *"?。 
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マー 








マー ジン を 設定 する プロ パテ ィ に は 、 上 下 左 右 を それ ぞ れ 個別 に 設定 する も の と 、 上 下 左 右 を 一 
括 じ て 設定 する も の が あり ます 。 
この あと に 紹介 する パ デ ィ ン グ 用 の プロ パテ ィ な ども 、 同 様 の パタ ー ン の も の が 用 意 さ れ て いま す 。 





| 指定 で きる 値 の 数 





プロ パテ ィ 名 


























margin-top 1 | 
margin-bottom 0 計 ] 
margin-left | 1 | 
margin-right 右 の マー ジン 放 屋 | 
margin 上 下 左 右 の マー ジン | 1 一 4 | 





マー ジン を 設定 する プロ パテ ィ 


※12 : この よう な ブラ ウザ の 種類 に よる 初期 状態 の 違い を な くす 目的 で 用 意 さ れ た CSS の こと を 「 リ セッ ト CSS] と 呼び 、 多 く 
の サイ ト の CSS の ソー スコ ー ド の 先頭 に は その よう な 指定 が 書か れ て いま す 。 た だ し 、「 リ セッ ト CSS」 は 必須 で は な く 、 
その 内 容 ち も サイト に よっ て 異な り ます 。 


CAPTEk デ ペー ジ 内 の 構造 





各 プ ロ パ ティ に 指定 で きる 値 は 次 の 通り で す 。 

た と えば 、「margin-top: 50px:」 と 指定 する と 上 の マー ジン が 50 ピ クセ ル に な り ま す 。 マ ー 
ジン を 「auto] に する と 、 ボ ックス の 他 の 領域 の サイ ズ な どか ら マ ー ジ ン が 自動 的 に 割り 出さ れ 
ます 。 ボ ックス の 幅 を 固定 し て 左右 の マー ジン を 「auto] に する と 、 左 右 の マー ジン は 同じ 距離 
に な り 、 結 果 と し て ボッ クス は セン タリ ング され ます 。 


マー ジン 関連 の プロ パテ ィ に 指定 で きる 値 


・ 単 位 つ き の 実 数 
マー ジン を 単位 つき の 実数 (30px な ど ) で 指定 し ます 。 


・ パ ー セ ン テ ー ジ 
この 要素 を 含ん で いる ブロ ッ ク レ ベル 要素 の 幅 (要素 内 容 を 表示 する 領域 の 幅 ) に 対す る パー セ 
ン テ ー ジ で 指定 し ます (25% の よう に 、 実 数 の 直後 に 半角 の 「%] を つけ て 指定 し ます )。 上 下 の 
マー ジン に つい て も 、 幅 に 対す る パー セン テー ジ と な り ま す 。 


・auto 
マー ジン を ボッ クス の 状況 か ら 自 動 的 に 設定 し ます 。 


みゆ margin プロ パテ ィ の 指定 方 法 


人 
マヨ ユ g マ ロ ュ 


上 下 左 右 の マー ジン を 一 括 し て 指定 する margin プロ パテ ィ だ け は 、 値 を 半角 スペ ー ス で 区 切る こ 
と で 最大 4 つま で 指定 で きま す 。 指定 し た 値 の 数 と それ ら の 値 が どの マー ジン に 適用 され る の か は 、 
以下 の 表 の よう に な っ て いま す 。 値 を 1 つ だ け 指 定 し た 場合 は それ が 上 下 左右 に 適用 され 、 値 を 4 
つ 指 定 す る と それ が 上 か ら 時 計 回 り に 右 ・ 下 ・ 左 と 適用 され ます 。 こ の あと に 登場 する パ デ ィ ン グ 
な どの 上 下 左右 を 一 括 で 指定 する プロ パテ ィ も 同じ パタ ー ン に な っ て いま す の で 、 値 の 数 と 適用 さ 
れる 上 下 左右 の 関係 は し っ か り と 覚え て くだ さい 。 


1 上 下 左右 margin: 10Dx: 
2 | 上 下 本 右 。 |mai Dpx- 
3 | 上 を 右 下 

4 則 右 下 コ margin: 10px 20px 30px 40px: 





| margin: 10px 20px: 





margin: 10px 20px 30px 

















上 下 左右 を 一 度 に 設定 で きる プロ パテ ィ の 値 の 指定 バタ ー ン 








1s@ 


ぁみ > マー ジン が 隣接 し て いる 場合 の 注意 


また 、 マ ー ジ ン に 関し て は 、 特 に 覚え て お いて 欲し い ル ー ル が あり ます 。 そ れ は 、 ボ ックス の 上 下 
の マー ジン は 、 ほ か の ボッ クス の 上 下 の マ ー ジ ン と 隣接 し て いる 場合 は 、 そ れ ら は 重なり 合う と い 
うこ と で す 。 た と えば 、 上 下 の マ ー ジ ン が 10 ピ クセ ル ず つ に 設定 され て いる p 要 素 が 2 つ 連 続 し 
て ある 場合 、2 つ の p 要 素 の あい だ の マー ジン は 、20 ピク セル で は な く 10 ピ クセ ル と な り ま す (10 
ピク セル +10 ピ クセ ル で は な く 、10 ピ クセ ル と 10 ピ クセ ル が 重なり 合っ て 計 10 ピ クセ ル と な り ま 
す )。 10 ピ クセ ル と 20 ピ クセ ル の マー ジン が 重なり 合っ た 場合 は 、20 ピ クセ ル と な り ま す 。 つま り 、 
隣接 する マー ジン は 、 そ の 中 で 最大 の も の だ けが 有効 に な る と いう こと で す 。 こ の ルー ル は 、 単 純 
に 隣り 合う 要素 だ け で な く 、 あ る 要素 と その 中 に 含ま れる 要素 で あっ て も 、 マ ー ジ ン が 隣接 し て い 
る 場合 に は 適用 され ます 。 た だ し 、 こ の よう に な る の は 上 下 の マ ー ジ ン だ け で 、 左 右 の マー ジン に 
関し て は 重なり 合う こと は あり ませ ん 。 








ボッ クス A ボッ クス A 


ボッ クス A の 下 マ ー ジ ン マー ジン が 重なり 合う 





ボッ クス B の 上 マー ジン 
ボッ クス B 
ボッ クス B 


マー ジン が 重なり 合う 





ボッ クス C の 上 マー ジン ボッ クス C 


ボッ クス C 





ボッ クス D 











上 下 の マ ー ジ ン は 、 隣 接する と 重なり 合う 


CgAPrEE デ ペー ジ 内 の 構造 

















パ デ ィ ン グ も マー ジン と 同様 に 上 下 左右 を それ ぞ れ 個別 に 設定 する プロ パテ ィ と 、 上 上 下 左 有 を 一 
括 じ て 設定 する プロ パテ ィ が 用 意 さ れ て いま す 。 























プロ パテ ィ 名 | | 指定 で きる 値 の 数 
padding-top 上 の パ デ ィ ジグ ー | | 
padding-bottom | 下 の パ ディ シグ | 1 ] 
padding-]eft | 左 の パ デ ィ ング | 1 | 
padding-right | 右 の パ デ ィ ピン ペグ 4 | 本 
padding | 上 下 左 右 の パ デ ィ ン グ | 還 計 308005 | 
バディ ング を 設定 する プロ パテ ィ 。 還 


指定 で きる 値 も マー ジン と 同様 で す が 、 パ ディ ング の 場合 は 「auto」 は 指定 で きま せん 。 


パ デ ィ ン グ 関連 の プロ パテ ィ に 指定 で きる 値 


・ 単 位 つ き の 実 数 
パ デ ィ ン グ を 上 単位 つき の 実数 (30px な ど ) で 指定 し ます 。 


だ 
ュ ヨ ユ 4y ロ > 


っ 7 パ ーー セ ら 2 ニー 
この 要素 を 含ん を で いる ブロ ッ ク レ ベル 要素 の 幅 に 対す る パー セン テー ジ で 指定 し ます 。 上 下 の 
パ デ ィ ン グ に つい て も 、 幅 に 対す る パー セン テー ジ と な り ま す 。 


上 下 左右 の パ デ ィ ン グ を 一 括 し て 指定 する padding プロ パテ ィ も 、margin プロ パテ ィ と 同様 の パ 
ター ン で 値 を 4 つま で 指定 で きま す 。 パ ディ ング に 関し て は 、 マ ー ジ ン の よう に 隣り 合う も の が 重 
な り 合 うこ と は あり ませ ん 。 
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ボー ダー を 設定 する プロ パテ ィ は 、 基 本 的 な も の (CSS2.1 で 定義 され て いる も の ) だ け で 20 種 類 
あり ます 。 ま ず は 、 ど ん な プロ パテ ィ が 用 意 さ れ て いる の か を ざっ と 見 て くだ さい 。 







































































ァ 4=『 ム て た 

border-top-style 上 の ボー ダー の 線 種 | 1 
border-bottom-style | 下 の ボ ー タ ダー の 線 種 II | 
border-left-style 左 の ボー ダー の 線 種 = | リ ] 
border-right-style 右 の ボー ダー の 線 種 ーー | ge | 
border-style 上 下 左右 の ボー ダー の 緑 種 | 1 て 4 | 
border-top-width 上 の ボー ダー の 太 さ 計 語 上 1 | 
border-bottom-width | 下 の ポ ボーダ ー の 太 さ 。 | 1 | 
border-1eft-width 左 の ボー ダー の 太 さ 1 | 
border-right-width | 右 の ボー ダー の 太 さ ー | 1 | 
border-width 上 下 棋 右 の ポー ダー の 太 さ 。。 。 | 1ー4 | 
border-top-color 士 の ボー 交 三 の 色 n 」 Si - 
border-bottom-color 茹 
border-left-color 左 の ボー ダー の 色 定本 | 
border-right-color 右 の ボー ダー の 色 - - | ーー _ 
border-color 上 下 左右 の ボー ダー の 色 1 一 4 
border-top 上 の ボー ダー の 線 種 と 太 さ と 色 。 条 種 - 太 さ / 色 | 
border-bottom 下 の ボー ダー の 線 種 と 太 さ と 色 - 線 種 / 太 さ / 色 | 
border-1eft 夏 の ボー ダー の 線 種 と 太 さと 色 | 線 種 / 太 さ / 色 | 
border-right 右 の ボー ダー - の 線 種 と 太 さ と 色 較 線 種 / 太 さ / 色 | 
border 上 下 左右 の ボー ダー の 線 種 と 大 さ と 色 | 線 種 プ 太 さ / 色 | 











ボー ダー を 設定 する プロ パテ ィ 。 「 線 種 / 太 さ / 色 ] は 半角 スペ ー ス で 区 切っ て 順不同 で 必要 な 値 の み 指定 
で きる が 、 そ れ ら の セッ ト を さら に 1 一 4 個 指定 する こと は で き な い 


ボー ダー も マー ジン や パ デ ィ ン グ と 同様 に 上 下 左右 に 個別 に 設定 する も の と 一 括 で 設定 する も の 
が 用 意 さ れ て いま す 。 し か し 、 ボ ー ダ ー の 場合 は 上 下 左 右 それ ぞ れ に 「 線 種 ] と 「 末 さき 」 と 「 色 」] 
が 指定 で きる た め 、 プ ロ パ ティ の 種類 が 多く な っ て いま す 。 マ ー ジ ン や パ デ ィ ン グ と 同様 に 値 を 1 
て 4 個 指定 し て 上 下 左右 に 適用 で きる タイ プ の ほか に 、 上 下 左右 を 別々 に 指定 で き な い けれ ども 「 線 
種 ] と 「 太 さ ] と 「 色 ] を 一 度 に 指定 で きる プロ パテ ィ も 用 意 さ れ て いま す (border プロ パテ ィ は 、 
上 下 左右 に 対し て 同じ 線 種 ・ 太 さ ・ 色 を 設定 し ます )。 こ の タイ プ の プロ パテ ィ は 必要 な 値 だ け を 
半角 スペ ー ス で 区 切っ て 指定 で きま す が 、 指 定 し な か っ た 値 は 初期 値 に リセ ッ ト さ れる 点 に 注意 し 
て くだ さい 。 つ まり 線 種 ・ 太 さ ・ 色 の いずれ か を 省略 し た 場合 、 そ の 値 は 現状 を 維持 する の で は な 
く 初期 値 に 戻さ れる こと に な り ま す 。「 線 種 」「 太 さ 」「 色 ] に 対し て 指定 で きる 値 は 次 の 通り で す 。 


CaAPTE ょ デ ペー ジ 内 の 構造 








ボ ポー ダー の 線 種 と し て 指定 で きる 値 


・none 
ボー ダー を 表示 し ませ ん 。 この 値 を 指定 する と ボー ダー の 太 さ も 0 に な り ま す 。 表 (table 要 素 ) 
の ボー ダー の 線 種 が 競合 し た 場合 は 、 ほ か の 値 が 優先 され ます 。 


・hidden 
ボー ダー を 表示 し ませ ん 。 この 値 を 指定 する と ボー ダー の 太 さ も 0 に な り ま す 。 表 (tab1e 要素 ) 
の ボー ダー の 線 種 が 競合 し た 場合 は 、 こ の 値 が 最 優先 され ます 。 


・S0o11d 
ボー ダー の 線 種 を 実線 に し ます 。 


・double 
ボー ダー の 線 種 を 二 重 線 に し ます 。 


・dotted 
ボー ダー の 線 種 を 点線 に し ます 。 


・dashed 
ボー ダー の 線 種 を 破線 に し ます 。 


・9rooVe 
ボー ダー の 線 自体 が 溝 に な っ て いる よう な ボー ダー に し ます 。 


・r1dge 
ボー ダー の 線 自体 が 盛り 上 が っ て いる よう な ボー ダー に し ます 。 


な 
も と と ざ に に と 


・1nset 
ボー ダー の 内 側 の 領域 全体 が 低く 見 える よう な ボー ダー に し ます 。 


・Ooutset 
ボー ダー の 内 側 の 領域 全体 が 高く 見 える よう な ボー ダー に し ます 。 
ボー ダー の 太 さ と し て 指定 で きる 値 


・ 単 位 つ き の 実 数 
ボー ダー の 太 さ を 単位 つき の 実数 (5px な ど ) で 指定 し ます 。 


・thin, medium, thick 
「 細 い 」「 中 くら い 」「 太 い 」 と いう 意味 の キー ワー ド で 指定 で きま す ( 実 際 に 表示 され る 大 さ は ブ 
ラウ ザ に よっ て 異な り ま す )。 


ボー ダー の 色 と し て 指定 で きる 値 


5 
色 の 書式 に 従っ て 任意 の ボー ダー の 色 を 指定 し ます 。 


・transparent 
ボー ダー の 色 を 透明 に し ます 。 








と > ボー ダー の 線 種 の 初期 値 に 注意 


ボー ダー を 指定 する と き に 注意 する こと は 、 ボ ー ダ ー の 線 種 の 初期 値 が 「none] に な っ て いる 点 
で す 。 線 種 が 「none] で ある と いう こと は 、 ボ ー ダ ー が 表示 され な い だ け で な く 太 さも 0 に な り 
ます 。 つ まり 、 線 種 と し て 「none」 以外 の 値 を 指定 する まで は 、 い くら 太 さ や 色 を 指定 し て も ボ 
ー ダ ー は 表示 され な い の で す 。 


ぁ ゆ > ボー ター の 表示 例 


以下 は 、 ボ ー ダ ー の 指定 例 と 表示 例 で す 。 お な じ 線 種 と 色 を 指定 し て いて も 、 ブ ラウ ザ の 種類 に 
よっ て 表示 結果 が 微妙 に 異な る と いう こと も 覚え て お きま し ょ う 。 





HTML sample/chapter-07/lecture-7-3/01.html 





01 <p id="sample1">none</Dp> 
02 <p id="sample2">sol11d</p> 
03 <p 1d="sample3">double</p> 
04 <p id="sample4">dotted く </p> 
05 <p 1d="sample5">dashed く </p> 
06 <p 1d="sample6">groove< く /D> 
07 <p 1d="sample7">ridge</P> 
08 <p 1d="sample8">1nset く /P> 
09 <p 1d="sample9">outset く /p> 





CSS sample/chapter-07/lecture-7-3/01-border.css 





01 pt 
02 margin: 20Dpxi 

03 border: solid 7px red: 
04 padding: 10px: 

05 text-a]lign: center: 

06 font-weight: bold: 

07 } 

08 #Sample1 
09 #sample2 


{ border-style: none: } 
{ border-style: solid: } 
10 #sample3 { border-style: double: } 
11 #sample4 { border-style: dotted: } 
12 #sample5 { border-style: dashed: } 
13 #sample6 { border-style: groove: } 
14 #sample7 { border-style: ridge: } 
15 #sample8 { border-style: jnset: } 
16 #sample9 { border-style: outset: } 




















ボー ダー 関連 プロ パテ ィ の 使用 例 


!4 オ 2 CHAPTEF デ ページ 内 の 構造 





(① サン フル 門 


_ に 誠 








| スス スミ メ ミミ ミミ ミミ ミミ メ ミミ ミ メ ヨ ヨ ョ | 


dotted 


LELLHHIHIIIIIIINIIININIIRININIINIIII に dotted 
Weeeeeeeeeeoeeeeeeeeeeeeee 胃 





シコ 
す ヨ ユエ アロ + 








区 多 
前 ペー ジ の ソー スコ ー ド の Google Chrome で の 表示 例 前 ペー ジ の ソー スコ ー ド の Firefox で の 表示 例 。「dotted] 
は Google Chrome で は 四角 の 点 に な る の に 対し 、Firefox で 
は 丸い 点 に な る 。 ま た 、「groovel」 以下 の 立体 的 な 表示 の 色 
あい も Google Chrome と は 微妙 に 違っ て いる 
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次 は 、 ボ ックス の 「 要 素 内 容 を 表示 ずる 領域 」 の 幅 と 高 さ を 設定 する プロ パテ ィ で す 。width と 
height は 大 き さ を 固定 的 に 指定 する と き に 使う プロ パテ ィ で 、 そ れ ら の 前 に 「min-] また は 
「max-] が つい た プロ パテ ィ は 、 最 小 値 また 最大 値 を 設定 し て 幅 や 高 さ を 制限 する 場合 に 使用 し 
ます 。 それ ぞ れ 次 の よう な 値 が 指定 で きま す 。 











プロ パテ ィ 名 設定 対象 | 指定 で きる 値 の 数 
width 幅 | 
height | 高き | 

min-width 最小 の 幅 ] 1 
max-width 。 | 最大 の 幅 | 1 
min-height 最小 の 高 さ ミニ ニー っ 
[max-hefght | 最大 の 高き 。 SS | 1 








幅 と 高 さ を 設定 する プロ パテ ィ 


width に 指定 で きる 値 


・ 単 位 つ き の 実 数 
幅 を 単位 つき の 実数 で 指定 し ます 。 


・ パ パーセンテージ 
この 要素 を 含ん を で いる ブロ ッ ク レ ベル 要素 の 幅 (width プロ パテ ィ の 値 ) に 対す る パー セン テー 
ジ で 指定 し ます 。 


・auto 
幅 を ボッ クス の 状況 か ら 自 動 設定 し ます 。 


height に 指定 で きる 値 


・ 単 位 つ き の 実 数 
高 さ を 単位 つき の 実数 で 指定 し ます 。 
・ パ ー セ ン テ ー ジ 
この 要素 を 含ん を で いる ブロ ッ ク レ ベル 要素 の 高 さ (height プロ パテ ィ の 値 ) に 対す る パー セン 
テー ジ で 指定 し ます 。 こ の 要素 を 含ん で いる ブロ ッ ク レ ベル 要素 の 高 さ が 特に 指定 され て いな 
い 場 合 は 、 高 さ は 「auto] と な り ま す 。 


・auto 
高き を ボッ クス の 状況 か ら 自 動 設定 し ます 。 


!4 邊 CaAPTEk デ ペー ジ 内 の 構造 








min-width に 指定 で きる 値 


・ 単 位 つ き の 実 数 
最小 の 幅 を 単位 つき の 実数 で 指定 し ます 。 


パーセンテージ 


この 要素 を 含ん を で いる ブロ ッ ク レ ベル 要素 の 幅 (width プロ パテ ィ の 値 ) に 対す る パー セン テー 
ジ で 指定 し ます 。 


max-width に 指定 で きる 値 


・none 
幅 の 制限 を し ませ ん 。 


・ 単 位 つ き の 実 数 
最大 の 幅 を 単位 つき の 実数 で 指定 し ます 。 


・ パ ー セ ン テ ー ジ 


この 要素 を 含ん で いる ブロ ッ ク レ ベル 要素 の 幅 (width プロ パテ ィ の 値 ) に 対す る パー セン テー 
ジ で 指定 し ます 。 


min-height に 指定 で きる 値 


・ 単 位 つ き の 実 数 
最小 の 高 さ を 単位 つき の 実数 で 指定 し ます 。 


・ が 三 セ ジン ーー テ ジ 


この 要素 を 含ん で いる ブロ ッ ク レ ベル 要素 の 高 さ (height プロ パテ ィ の 値 ) に 対す る パー セン 
テー ジ で 指定 し ます 。 こ の 要素 を 含ん で いる ブロ ッ ク レ ベル 要素 の 高 さ が 特に 指定 され て いな 


い 場合 、 値 は 「0] と な り ま す 。 
max-height に 指定 で きる 値 


・none 
高 さ の 制限 を し ませ ん 。 


・ 単 位 つき の 実数 
最大 の 高 さ を 単位 つき の 実数 で 指定 し ます 。 


パー セン デラ ジン 
この 要素 を 含ん を で いる ブロ ッ ク レ ベル 要素 の 高 さ (height プロ パテ ィ の 値 ) に 対す る パー セン 


テー ジ で 指定 し ます 。 こ の 要素 を 含ん で いる ブロ ッ ク レ ベル 要素 の 高 さ が 特に 指定 され て いな 
い 場 合 、 値 は 「none] と な り ま す 。 





ぞ 
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ぁみ パー セン テー ジ で 高 さ を 指定 する 場合 の 注意 


ここ で 紹介 し て いる プロ パテ ィ は 、 単 純 に 大 き さ を 指定 し た サイ ズ に 変更 し た り 、 大 き さ を 制限 す 
る だ け で 、 使 用 方 法 が 特に 難し いと いう も の で は あり ませ ん 。 た だ し 、 パ ー セ ン テ ー ジ で 高 さ を 指 
定 する 際 は 、 そ の 要素 を 含ん で いる プロ ッ ク レ ベル 要素 の 高き が きち ん と 指定 され て いる か どう か 
注意 し て くだ さい 。 


た と えば 、 以 下 の 例 で は div 要 素 の 高 さ と し て 「100%| を 指定 し て いま す が 、 表 示 結 果 を 見 る と 
高 さ は 100% に は な っ て いま せん 。 





HTML 





01 <div>d1v 要 素 く /d1v> 





CSS 





01 html, body { 
02 margin: 0: 
03 padding: 0: 
04 } 

05 div { 

06 height: 100%: 
07 background-color: #ff66ff: 
08 } 




















div 要 素 の 高 さ と し て 「100%] を 指定 し て いる 例 


|)) ニ < 島 Gcoooe ) 





上 の ソー スコ ー ド の ブラ ウザ で の 表示 結果 


これ は 、div 要 素 を 含ん で いる body 要素 の 高き が 指定 され で いな いこ と が 原因 で す 。 そ の た め 、 
height プロ パテ ィ の 値 と し て 「100%] を 指定 し て いる に も か か わら ず 、 結 果 と し て 値 は 「auto] 
と な っ て いる の で す 。 し か し 、body 要素 の 高 さ を 指定 する だ け で は 、 ま だ 足り ませ ん 。body 要素 
を 含ん で いる Html 要 素 の 高き が 指定 され で いな いか ら で す (html 要 素 を 含む 要素 は あり ませ ん の で 





これ 以上 は 考え る 必要 は あり ませ ん )。 結果 と し て 、 以 下 の よ うな 指定 を 追加 し て 、body 要 素 と 
html 要 素 の 両方 に 「height: 100%:」 の 指定 が 適用 され る よう に する と 、div 要 素 の 高 さ が 
100% に な り ま す 。 





HTML sample/chapter-07/lecture-7-3/02.html 


| 01 <div>div 要 素 く </div> 


CSS sample/chapter-07/lecture-7-3/02-width-height.css 


01 htm1, body { 

| 02 margin: 0: 

03 padding: 0: 

04 height: 100%: キーーーーー この 指定 も 追加 
05 1 

06 div { 

07 height: 100%: 

08 background-color: #ff66ff: 














Eh >。 <MGcoox ) 





上 の ソー スコ ー ド の ブラ ウザ で の 表示 結果 


COLVMAU / 


width と height の 発音 


これ ら は よく 使う プロ パテ ィ で ある に も か か わら ず 、 会 話 の 中 で 取り 上 げ る と き に 何と 言え ば 良い の 
か 迷う プロ パテ ィ で も あり ます 。 ま ず 、「height| は 英語 の 発音 で は ハイ ト と 読み ます 。「width] の 方 
は ちょ っ と や っ か いで 、 英 語 の 発音 で は 「dth]」 の 部 分 に 母音 が 含ま れ て いな いた め 、 日 本 人 に は 「dth] 
は まとまっ て 「 ズ ]| の よう に 聞こ え 、 結 果 と し て 「width] は 「 ウ ィ ズ | の よう に 聞こ えま す 。 し か し 、 
日 本 語 の 会 話 の 中 で 「 ウ ィ ズ 」 と 言っ て も 、「width] を 連想 する 人 は 多く は あり ませ ん 。 現 時 点 で も 
っ と も 確実 に 伝わる の は 、 あ えて 「width] だ け は 日 本 語 に し て 「 幅 ] と 言う こと の よう で す 。 
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角 を 丸く する !csssml 





ボッ クス の 角 は 、 丸 くす る こと も で きま す 。 た だ し 、 こ こま で に 紹介 し て きた マー ジン や パ デ ィ ン 
グ 、 ボ ー ダ ー、 幅 と 高 さ な どの 指定 は CSS2.1 で も 定義 され て いた た め 基 本 的 に どの ブラ ウザ で も 
使用 で きま す が 、 角 を 即 ぐ ずる プロ パテ ィ に 関し て は 勧告 候補 (2012 年 7 月 現在 ) の 段階 の CSS3 
プロ パテ ィ で ある た め 、Internet Explorer 8 以前 の バー ジョ ン で は 未 対応 と な っ て いる 点 に 注意 し 
て くだ さい (それ 以外 の ブラ ウザ は 比較 的 古い バー ジョ ン か ら 対 応 し て いま す )。 角 を 丸く する プロ 
パテ ィ に は 次 の も の が 用 意 さ れ て お り 、 以 下 に 示し た 値 が 指定 で きま す 。 指定 する 値 は 、 角 を 1/4 
の 円 に みた て た と き の 半 径 で す 。 


プロ パテ ィ 名 | 設 お 考 人 - を -[【 ノ 1 





border-top-left-radius 左上 の 角 丸 
border-top-right-radius | 右上 の 角 丸 
| border-bottom-right-radius | 右 下 の 角 丸 
border-bottom-left-radius | 左下 の 角 丸 
border-radius | 上 下 左右 の 角 丸 | 1 
ボッ クス の 角 を 丸く する プロ パテ ィ - 還 























角 丸 を 設定 する プロ パテ ィ に 指定 で きる 値 


・ 単 位 つ き の 実 数 
角 の 半径 を 単位 つき の 実数 で 指定 し ます 。 


シン ae 
角 の 半径 を ボー ダー 領域 まで の 大 き さ に 対す る パー セン テー ジ で 指定 し ます 。 

















値 に は 、 角 を 1/4 の 円 と みた て た と き の 半 径 を 指定 する 


CnAPTEF デ ペー ジ 内 の 構造 









これ ら は ボッ クス の 角 に 関す る 指定 で す の で 、 こ れ ま で の よう に 「 上 下 左 右 ] で は あり ませ ん が 、 
同様 の 4 つの 角 に 関す る 個別 の プロ パテ ィ が 用 意 さ れ て お り 、 ま た 一 括 指定 の プロ パテ ィ で は 次 の 
よう に 値 を 最大 4 つま で 指定 する こと が で きま す 。 


値 の 数 | 各 値 の 適用 場所 指定 例 


1 4 つの 久 す べ て border-radius: 10px: 

の 左上 と 右 下 右上 と 左下 border-radius: 10px 20px: 

3 左上 右上 と 左下 右 下 border-radius: 10px 20px 30px: 

4 左上 右上 右 下 左下 border-radius: 10px 20px 30px 40Dpx: 還 | 
border-radius プロ パテ ィ の 値 の 指定 パタ ー ン 


























と フラ ウザ の 対応 状況 に つい て 


角 を 丸く する プロ パテ ィ は すでに 草案 で は な く な っ て いま す の で 、 新 し い ブ ラウ ザ だ け を 対象 と す 
る の で あれ ば ベン ダー プレ フィ ックス を つけ る こと な く 使 用 で きま す 。Firefox 3.6 以 前 や Safari 4 
以前 に も 対応 させ た い 場 合 に 限り 、 ベ ンダ ー プ レフ ィ ッ クス を つけ た 指定 も 追加 し て くだ さい 。 
Internet Explorer と Opera に 関し て は 、 草 案 段階 を 過ぎ て か ら 対 応 し た た め 、 ベ ンダ ー プ レフ ィ 
ックス を つけ た 指定 に は 対応 し て いま せん (つま り 、Internet Explorer と Opera 向 け の ベン ダー プ 
レフ ィ ッ クス は 不要 で す )。 
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HTML sample/chapter-07/lecture-7-3/03.html 
| 01 く <p> 角 を 丸く し て いま すく </p> 
【 こ > ニー ニー 











CSS sample/chapter-07/lecture-7-3/03-border-radius.css 





本 
| 01 pt 

| 02 padding: 3em: 

| 03 color: white: 

| 04 background-color: silver 

| 05 -webkit-border-radius: 10Dx: 
| 06 -moz-border-radius: 10Px: 

| 07 border-radius: 10PX: 

| 08 1 

















border-radius プロ パテ ィ の 指定 例 
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border-radius を 指定 し た ボッ クス の 表示 例 


CSS3 で 定義 され て いる 名 前 
]border-top-left-radius 


| Firefox 3.6 以 前 が サポ ー ト し て いる 名 前 
-moz-border-radius-topleft 





border-top-right-radius 


-moz-border-radius-topright 





| border-bottom-right-radius 


-moz-border-radius-bottomright 





border-bottom-1eft-radius 








-moz-border-radfus-bottomleft 





育 景 を 指定 する (2) 


Chapter 4 で 背景 関連 の プロ パテ ィ を 一 部 紹介 し まし た が 、 背 景 に 関連 する プロ パテ ィ は それ 
以外 に も まだ まだ た くさ ん あり ます 。 実は 、 背 景 に 関す る 指定 は ボッ クス の 各 表 示 領 域 と も 密 
接 に 関わ りあ っ て いる た め 、 ボ ックス に 関す る 説明 を し て いな い 段 階 で は 正確 な 仕様 を 伝え る 
こと が 難し い プ ロ パ ティ が 多かっ た の で す 。 と いう わけ で 、 こ こ で は ボッ クス の 構造 を ふま え 
た 上 で 、 背 景 関連 の 残り の プロ パテ ィ を 紹介 し て いき ます 。 


育 景 画像 の 表示 位置 を 指定 する 

















background-position プロ パテ ィ を 使用 する と 、 背 景 画像 の 表示 位置 を 指定 する こと が で きま す 。 
background-repeat プロ パテ ィ の 値 が 「no- repeat」 の 場合 (背景 画像 を 1 つ だ け 表 示さ せる 場合 ) 

は 背景 画像 が その 位置 に 表示 され ます が 、 背 景 画像 を 繰り 返し て 表示 させ る 場合 に は その 位置 を や 
基準 に し て 縦 ま た は 横 に 繰り 返さ れる こと に な り ま す 。 

指定 で きる 値 は 次 の 通り で す 。 


3 エマ ロフ 


background-position に 指定 で きる 値 


・ 単 位 つ き の 実 数 

表示 位置 を 単位 つき の 実数 で 指定 し ます 。 
・ パ ー セ ン テ ー ジ 

表示 位置 を パー セン テー ジ で 指定 し ます 。 


・top, bottom, left, right, center 
表示 位置 を キー ワー ド で 指定 し ます 。top は 縦 方 向 の 「0%]、bottom は 「100%] と 同じ で す 。 
同様 に 、1eft は 横 方 向 の 「0%]、right は 「100%] と 同じ で す 。center は 縦 方 向 また は 横 方 
向 の 「50%] と 同じ で す 。 


表示 位置 は 、 横 方 向 ・ 縦 方 向 の 順に 半角 スペ ー ス で 区 切っ て 2 つ 指 定 し ます (た だ し 、 値 を キー ワ 
ー ド の み で 指定 する の で あれ ば 順番 は 送 で も か まい ませ ん )。 値 を 1 つ し か 指定 し な か っ た 場合 は 、 
も う 一 方 に 「centerl」 が 指定 され た も の と し て 処理 され ます 。 








pb 表示 位置 の 基準 


表示 位置 の 基準 は 、 パ ディ ング 領域 の 左上 で す 。 パ ディ ング 領域 の 左上 に 背景 画像 の 左上 が ぴっ 
た り 重 な っ た 状態 が 「0px 0px」「096 0%」「left top] で す 。 逆 に 、 パ ディ ング 領域 の 右 下 に 背景 画 
像 の 右 下 が び ぴっ た り 重 な っ た 状態 は 「100%% 100%」「right bottom] と な り ま す 。 背 景 画 像 が パ デ 
ィング 領域 の 中 央 に ある 状態 は 「509%% 50%」「center center| で す 。 


値 を 「 単 位 つき の 実数 ] で 指定 し た 場合 、 横 方 向 は パ デ ィ ン グ 領域 の 左 か ら 背 景 画像 の 左 ま で の 
距離 、 縦 方 向 は パ デ ィ ン グ 領域 の 上 か ら 背 景 画 像 の 上 まで の 距離 と な り ま す 。 値 を 「 パ ー セ ン テ 
ー ジ 」 で 指定 し た 場合 は 、 横 方 向 ・ 縦 方 向 と も に パ デ ィ ン グ 領域 の その % の ポイ ント と 背景 画像 
の その % の ポイ ント を 重ね た 状態 と な る 位置 に 表示 され ます 。 値 を 数 値 で 指定 する 場合 に は 、 マ 
イナ ス の 値 も 指定 で きま す 。 


ぁ b ぁ 背景 画像 の 表示 例 


で は ここ で 、 背 景 画像 を ペー ジ 全 体 の 中 央 に 表示 させ る 例 を 紹介 し て お きま し ょ う 。 ソ ー ス コー ド 
は 次 の 通り で す 。 





HTML 


9 
02 <body> 

03 

04 </body> | 
05 </html> 








CSS 


01 html, body { 

02 margin: 0: 

03 } 

04 body { 

05 background-image: url(images/she11 .jpg): 

06 background-repeat: no-repeat: 

07 background-position: center: | 
08 } | 





























背景 画像 を ペー ジ 全体 の 中 央 に 表示 させ る 例 背景 画像 と し て 指定 し て いる 画像 
shell.jpg」 





し か し 、 実 際 に この ソー スコ ー ド を ブラ ウザ で 表示 させ て みる と 、 表 示 結 果 は 次 ペー ジ の よう に な 
り ま す 。 


1! て 2 CmAPTEk デ ペー ジ 内 の 構造 





背景 画像 は 横 方 向 の 中 央 に は 配置 され て いる 
の で す が 、 縦 方 向 は 中 央 どこ ろか マイ ナス の 
数 値 を 指定 し た よう な 状態 と か っ て いま す 。 
な ぜ こ の よう な 表示 結果 と な っ て し まっ た の 
で し ょ うか ? background-position プロ パ 
ティ の 値 に は 「center] だ け を 指定 し て い 
ます の で 、 も う 一 方 も 「center」 に な り 、 
「center center] を 指定 し た 場合 と 同じ 
表示 結果 に な る は ず で す 。 


実は 、 こ の 背景 画像 は まっ た く 指 定 通 り に 表 
示さ れ て いる と 言え ます 。 背景 画像 は 指定 通 
り に 、body 要素 の 縦横 の 中 央 に し っ か り と 表 
示さ れ て いる の で す 。 で は 、 何 が お か し い の 
で し よう か ? 














前 ペー ジ の ソー スコ ー ド の 表示 例 


実は body 要素 の 内 容 が 空 な の で 、body 要素 の 高 さ が 0 と な っ て いる の で す 。 高 き が 0 の ボッ クス 
の 中 央 に 合わ せ て 表示 され て いる の で 、 上 の よう な 表示 結果 と な っ た わけ で す 。 


し た が っ て 、body 要素 の 高 さ を 「100%] に すれ ば いい の で す が 、 高 さ を パ ー セ ン テ ー ジ で 指定 
する 場合 に は 、 そ れ を 含む 要素 に も 高 さ を 指定 する 必要 が あり ます 。 結果 と し て 、 次 の 指定 を 追加 
する こと で 、 背 景 画像 は ペー ジ の 中 央 に 表示 され る よう に な り ま す 。 





HTML sample/chapter-07/lecture-7-4/01.html 





02 <body> 
04 </body> 
05 </html> 





CSS sample/chapter-07/lecture-7-4/01-bg-position.css 





01 html, body { 
02 margin: 0: 


04 } 
05 body { 


07 background-repeat: no-repeat: 
08 background-position: center: 





03 height: 100%: ペーーーーー この 指定 を 追加 


06 background-image: url(images/she]1.jpg): 

















先程 の CSS の ソー スコ ー ド に 、body 要素 と html 要素 の 高 さ の 指定 も 追加 





と 


E ゴ 
Pa 
0 
ゴ 
m 
か 














ーーーーーーーーーー? 


背景 画像 が ペー ジ の 中 央 に 表示 され る よう に な っ た 





背景 画像 を ウィ ンド ウ に 固定 する 


長い ペー ジ を スク ロー ル す る と 、 通 常 は コン テン ツ と 一 緒 に 背景 画像 も スク ロー ル し ます 。 
background-attachment プロ パテ ィ の 値 と し て 「fXed」 を 指定 する と 、 背 景 画 像 は ウィ ンド ウ 
上 に 固定 され 、 ス クロ ー ル し て も 動か な く な り ま す 。 


background-attachment に 指定 で きる 値 


・SCcro]1 
背景 画像 は 他 の コン テン ツ と 一 緒 に スク ロー ル し ます 。 


・f1xed 
背景 画像 を ウィ ンド ウ 上 に 固定 し て 、 ス クロ ー ル し て も 動か な いよ うに し ます 。 


な お 、background-attachment プロ パテ ィ の 値 と し て 「fixed] を 指定 する と 、background- 


position プロ パテ ィ で の 配置 の 基準 が 「 パ ディ ング 領域 」 か ら 「 ウ ィ ン ド ウ の 表示 領域 (見え てい 
る 領域) 全体 ] と な り ま す の で 注意 し て くだ さい 。 


! て 邊 CaAPTE ょ F デー ページ 内 の 構造 








ぁ ぁ 背景 画像 の 固定 の 表示 例 


以下 は 、 背 景 画像 を 繰り 返し な し で 右 下 に 配置 し て 、background-attachment プロ パテ ィ の 値 を 
「fixed] に し た 例 で す 。 ス クロ ー ル させ て も 背景 画像 の 位置 は 変わ り ま せん 。 





HTML sample/chapter-07/lecture-7-4/02.html 








01 <p> 

02 ウィ ンド ウ を 小さ くし て 、 画 面 を スク ロー ル し て みて くだ さい 。 

03 </p> 

04 < く Pp> 

05 テキ スト は 移動 し ます が 、 右 下 の チ ュー リッ プ は 固定 され た まま 動き ませ ん 。 
06 </P> 


07 
08 ・・・ 以 下 、 同 じ テ キス ト の 繰り 返し ・・・ 





CSS sample/chapter-07/lecture-7-4/02-bg-attachment.css 





1] body { 

02 margin: 50px 200px 0 50px: 

03 background-image: url(1images/tulip.pn9): 
04 background-repeat: no-repeat: 

05 background-position: right bottom: 

06 background-attachment: fixed: 

07 } 














background-attachment プロ パテ ィ の 指定 例 





を っ で 作り O |N 
され た まま 動き ませ ん 。 [ 
| 











ウィ ンド ウ を 小さ くし て 、 ウィ ンド ウ を 小さ くし て 、 





ウィ ンド ウ を 小さ くし て 、 
画面 を スク ロー ル し て みて 
くだ さい 。 





し テキ フト は 征 kl ま キ ネ ミ 


画面 を スク ロー ル し て みて 画面 を スク ロー ル し て みて 
くだ さい 。 くだ さい 。 

テキ スト は 移動 し ます が 、 テキ スト は 移動 し ます が 、 
右 下 の チュ ー リ ッ プ は 固定 右 下 の チ ュー リッ プ は 固定 
され た まま 動き ませ ん 。 され た まま 動き ませ ん 。 





引 









ウィ ンド ウ を 小さ くし て 、 
画面 を スク ロー ル し て みて 
くだ さい 。 





ーーーー 





上 の ソー スコ ー ド の 表示 例 。 ス クロ ー ル させ て も 背景 画像 の 位置 は 変わ ら な い 








の 
CO と VA / 


数 値 が 0 の と き は 単位 を 省略 で きる 


さて 、 す で に お 気付 き の 方 も いら っ し ゃ る か も し れ ま せん が 、 先 程 の サン プル の margin プロ パテ ィ の 
値 の 中 に 、 単 位 の つい て いな い 値 が 混じっ て いま し た 。 





| 01 body 【 

| 02 margin: 50px 200px 0 50px: 

| 04 } 

[0」 に 単位 が つい て いな い 








実は 、 値 が 「 単 位 つ き の 実 数 ] で あっ て も 、 そ の 値 が 0 で ある 場合 に は 単位 は 省略 で きる こと に な っ 
て いる の で す 。 今後 の サン プル で も 、 値 が 0 の 場合 に は 基本 的 に 0 を 省略 し ます の で 、 覚 えて お いて 
くだ さい 。 








背景 画像 の 表示 サイ ズ を 変更 する icsswl 














background-size は 背景 画像 の 表示 サイ ズ を 指定 する プロ パテ ィ で す 。 次 の 値 が 指定 で きま す 。 


background-size に 指定 で きる 値 


・ 単 位 つき の 実数 
背景 画像 の 幅 また は 高 さ を 単 位 つき の 実数 で 指定 し ます 。 


ンー ビー 
背景 画像 の 幅 ま た は 高 さ を パ デ ィ ン グ 領域 に 対す る パー セン テー ジ で 指定 し ます 。 

・ auto 
幅 と 高 さ の 両方 が 「auto」 の 場合 は 、 元 の サイ ズ で 表示 し ます 。 幅 また は 高 さ の 一 方 に この 値 
を 指定 する と 、 育 景 画 像 の 縦横 の 比率 を 保っ た まま も う 一 方 に 合わ せ た サ イズ に な り ま す 。 


SCOVeP 
縦横 の 比率 を 保っ た まま 、 背 景 画像 1 つ で 表示 領域 全体 を 覆う サイ ズ に し ます 。 


・conta1n 
縦横 の 比率 を 保っ た まま 、 背 景 画 像 の 全体 が 表示 され る サイ ズ に し ます 。 


「cover] と 「contain] は 単独 で 指定 し ます が 、 そ れ 以 外 の 値 に つい て は 半角 スペ ー ス で 区 切 


1 て 6 CgAPrEF デ ペー ジ 内 の 構造 








っ て 幅 ・ 高 さ の 順に 指定 し ます 。2 つ め の 値 を 省略 する と 、 高 さ に 「auto] を 指定 し た 状態 と な 
り ま す 。 


ぁ > フラ ウザ の 対応 状況 に つい て 


この プロ パテ ィ は CSS3 で 新しく 定義 され た も の で 、Internet Explorer 8 以前 は 対応 し て いま せん 。 
Firefox や Safari の 少し 古い バー ジョ ン に も 対応 させ た い 場 合 は 、、 ベ ンダ ー プ レフ ィ ッ クス つき の 
指定 も 加え て くだ さい 。Internet Explorer と Opera に つい て は 、 ベ ンダ ー プ レフ ィ ッ クス つき の 


値 は サポ ー ト し て ませ ん の で 不要 で す 。 








HTML sample/chapter-07/lecture-7-4/03.html 
く body> 
1 </body> 
| </htm1> 


CSS sample/chapter-07/lecture-7-4/03-bg-size-cover.CSSs 


htm1, body { height: 100%: } 

body { 
margin: 0: 
background-1mage: url(1mages/green.JD9): 
background-position: center: 


webk1it-background-S1zZe: COVer 
mozZ-Dackground-sS1ze: )VeTi 
background-S1ze: COVer: 


} 











cover] の 指定 例 





表示 させ て いる 背景 画像 「green.jpg] 





だ 
と で そ に た 




















ウィ ンド ウ の サイ ズ を いろ いろ と 変更 し て みて も 、 常 に 1 つの 背景 画像 で 全体 を 覆っ て いる 











HTML sample/chapter-07/lecture-7-4/04.html 


く body> 
く </body> 
</html> 





CSS sample/chapter-07/lecture-7-4/04-bg-size-contain.CSSs 


htm1 , body { height: 100%: } 
body { 
margin: 0: 


background-image: url(images/un1 .jpdg) : 


background-position: center: 


background-repeat: no-repeat: 
webkit-background-s1Ze: )nta1r 


moz-Dackqground-s1ize: contain: 


background-size: 





値 contain] の 指定 例 








ジ 内 の 構造 




















表示 させ て いる 背景 画像 「uni.jpg」 








ュ ヨ エアロ う 
































ウィ ンド ウ の サイ ズ を いろ いろ と 変更 し て みて も 、 常 に 背景 画像 の 全体 が 表示 され て いる 


7 う 








複数 の 押 像 を 指定 する | csssw| 


CSS2.1 の 仕様 で は 、1 つ の ボッ クス に 対し て 1 つの 背景 画像 し か 指定 で き な い こと に な っ て い 
ます 。 し か し 、CSS3 か ら は 1 つの ボッ クス に いく つ で も 背景 画像 を 指定 で きま す 。 た だ し 、 
Google Chrome や Safari、Firefox は 少々 古い バー ジョ ン で も 複数 の 背景 画像 に 対応 し て いま す 
が 、Internet Explorer に つい て は バー ジョ ン 8 以 前 は 未 対応 で ある 点 に 注意 し て くだ さい 。 


複数 の 背景 画像 を 指定 する 方 法 は 簡単 で 、 単 純 に 値 を カン マ で 区 切っ て 複数 指定 する だ け で す 。 
より 前 に (左側 ) に 指定 し て いる 背景 画像 ほど 上 に 重なっ て 表示 され ます 。 各 背景 画像 の 表示 位置 
や 繰り 返し な ども 指定 で きる よう に 、 背 景 関 連 の その 他 の プロ パテ ィ も 同様 に カン マ で 区 切っ て 
複数 の 値 を 指定 で きる よう に な っ て いま す 。 

次 の サン プル で は 、body 要素 に 3 つの 背景 画像 を 指定 し て いま す 。 





HTML sample/chapter-07/lecture-7-4/05.html 


| 01 
| 02 <body> 
| 03 
04 </body> 
05 </html> 


CSS sample/chapter-07/lecture-7-4/05-multiple-images.cSs 


01 html, body { height: 100%: } 

02 body { 

03 margin: 0: 

04 background-image: ur]1(images/wal1.png), url(images/plane.Ppn9 ), 
| ur1(images/sky.jDg): 
| 05 background-position: bottom, 50% 10%, center: 

06 background-repeat: no-repeat: 
-webkit-background-sjize: 100% auto, auto, CoVer: 
-m0z-background-s1ze: 100% auto, auto。 CoVeTr: 
| 09 background-size: 100% auto, auto, cover: 

10 } 





複数 の 背景 画像 を 指定 する 例 。 背景 関連 の プロ バテ ィ に は 、 カ ンマ で 区 切れ ば 複数 の 値 が 指定 で きる 


[ 
1| 


表示 させ て いる 背景 画像 「plane.png]」 




















表示 させ て いる 背景 画像 「wall.png」 


CHAPTEF デ ペー ジ 内 の 構造 











表示 させ て いる 背景 画像 「sky.jpg」 























各 背景 画像 の 表示 位置 や 表示 サイ ズ を 変え て ある の で 、 ウ ィ ン ド ウ の 大 き さ を 変え る と 背景 も この よう に 変化 する 


背景 関連 プロ パテ ィ の 一 括 指 定 














フォ ント 関連 の プロ パテ ィ の 値 を まとめ て 指定 で きる font プ ロ パ ティ の よう に 、 背 景 関 連 の プ 
ロ パ ティ の 値 を まとめ て 一 度 に 指定 で きる プロ パテ ィ が あり ます 。 それ が background プロ パテ 
ィ で す ( 実 は Chapter 2 で 背景 色 を 指定 し た の は この プロ パテ ィ で し た )。 本 書 で 紹介 し た 次 の プ 
ロ パ ティ の 値 は すべ て 指定 で きま す 。 








= 
や 3 
本 
* 











background に 指定 で きる 値 


・background-color の 値 
background-color に 指定 で きる 値 が 指定 で きま す 。 


・background-image の 値 
background-image に 指定 で きる 値 が 指定 で きま す 。 


・background-repeat の 値 
background-repeat に 指定 で きる 値 が 指定 で きま す 。 


・background-position の 値 
background-position に 指定 で きる 値 が 指定 で きま す 。 


・background-attachment の 値 
background-attachment に 指定 で きる 値 が 指定 で きま す 。 


・background-size の 値 
background-size に 指定 で きる 値 が 指定 で きま す 。 


基本 的 に は 、 必 要 な 値 を 順不同 で 半角 スペ ー ス で 区 切っ て 指定 する だ け で OK で す 。 た だ し 、 こ 
こ で 指定 し て いな い 値 に つい て は 、 現 状 を 維持 する の で は な く 初 期 値 に リセ ッ ト さ れ ま す の で 注 
意 し て くだ さい 。 





HTML sample/chapter-07/lecture-7-4/06.html 


| 01 ゃ ッッ 
02 <body> 
| 03 

04 </body> 
05 </html> 


CSS sample/chapter-07/lecture-7-4/06-background-1.css 
01 html, body { height: 100%: } 

02 body { 

03 margin: 0: 


04 background: white url(jmages/shel1.jpg) no-repeat center: 














background プロ パテ ィ に は 背景 関連 の プロ パテ ィ の 値 を 順不同 で まとめ て 指定 で きる 


162 CaAPTE ょ デ ペー ジ 内 の 構造 





みゆ 指定 値 の 単位 に つい て 


た だ し 、background-position と background-size に は どちら も 「 単 位 つ き の 実数 ] と 「 パ 
ーー セ ン テ ー ジ 」 が 指定 で きる た め 、 そ れ ら を 区 別 で きる よう に し て お か ね けれ ば な り ま せん 。 そ の 
た め 、 こ れ ら を 指定 する 際 に は 、 次 の よう な ルー ル が あり ます 。 


まず 、「 単 位 つ き の 実数 ] また は 「 パ ー セ ン テ ー ジ | が 1 つ だ け 指 定 さ れ て いる 場合 は background= 
Position の 値 だ と 解釈 され ます 。 そ し て 、background-size の 値 を 指定 する 際 は 、 は じ め に 
background-position の 値 を 書き 、 そ の 値 の あと に 半角 の スラ ッシュ (/) で 区 切っ て 
background-sfze の 値 を 書き ます 。font プ ロ パ ティ の 行間 の 値 を 指定 する と き に 、font- 
s1ze の 値 と の あい だ を スラ ッシュ で 区 切っ た 方 法 と 同じ で す 。 


た だ し 現時 点 で は 、background プロ パテ ィ に 対し て background-size の 値 を 指定 し て も 未 対 
応 の ブラ ウザ が 多い よう で す 。 ま た 、background プロ パテ ィ を 使用 する と ベン ダー プレ フィ ッ ク 
ス を つけ た 指定 も 組み 込め な く な り ま す 。 そ の よう な 理由 か ら 、 現 時 点 で は background-size プ 
ロ パ ティ の 値 に つい て は 、background プロ パテ ィ で 指定 せ ず に 別途 指定 し た 方 が 安全 で す 。 


な お 、background プロ パテ ィ も 複数 の 背景 画像 に 対応 し て いま す 。 他 の 背景 関連 の プロ パテ ィ と 
同様 に 、 カ ンマ で 区 切っ て 指定 で きま す 。 た だ し 、 そ の 場合 で も background-color の 値 は 1 
つ し か 有効 に で きま せん の で 、 必 ず 一 番 最後 (一 番 右側 ) の 値 と し て 含め る よう に し て くだ さい 。 





HTML sample/chapter-07/lecture-7-4/07.html 





0 se 
02 <body> 
03 

04 </body> 
05 </html> 





CSS sample/chapter-07/lecture-7-4/07-background-2.css 





| 01 html, body { height: 100%: 1} 

| 02 body { 

03 margin: 0: 

04 background: url(images/wal] .png) no-repeat bottom, url1(1images/plane. 
png) no-repeat 50% 10%。#00bfff ur]1(images/skKy.jpg) no-repeat center: 


05 -webkit-background-size: 100% auto, auto, Cover: 
06 -moz-background-size: 100% auto, auto, Cover: 
07 background-size: 100% auto., auto, Cover 

08 } 




















background プロ パテ ィ に 複数 の 背景 画像 を 指定 し た 例 。background-size プロ バテ ィ の 値 に つい て は 、 現 時 点 で は 別に 指定 し た 
方 が よい 





ゃ 
> 
る 
」 
m 
か 











配置 方 法 を 指定 する プロ パティ 


本 章 で は 重要 な 要素 や プロ パテ ィ が どん どん 登場 し て いま す が 、 こ の 章 の 最後 に 、 現 在 の 
CSS で の 配置 や レイ アウ ト の 要 と も 言え る フロ ー ト と 、 そ の 他 の 配置 関連 プロ パテ ィ に つい 
て 説明 し て お きま す 。 


フロ ー ト の 基本 


フロ ー ト と は 、float プロ パテ ィ に よっ て 、 あ る 要素 を 左 ま た は 右 に 寄せ で 配置 じ 。 そ の 反対 側 に 
後続 の 要素 が 回 り 込 お よう に し た 状態 の こと を 言い ます 。float プロ パテ ィ は イン ライ ン 要 素 を 含 
む ほ と ん どの 要素 に 指定 で き 、 フ ロー ト の 状態 に な る と イン ライ ン 要 素 で あっ て も その ボッ クス は 
ブロ ッ ク レ ベル の ボッ クス に な り ま す 。 指定 で きる 値 は 次 の 通り で す 。 
float に 指定 で きる 値 
・1eft 
左側 に フロ ー ト させ ます 。 


・riqght 
右側 に フロ ー ト させ ます 。 


・none 
フロ ー ト し て いな い 通 常 の 状態 に し ます 。 


この プロ パテ ィ の ご く 基 本 的 な 使い 方 と し て 、 画 像 の 横 に テキ スト を 回 り 込 ませ る 例 を 示し ます 。 





HTML sample/chapter-07/lecture-7-5/01.html 


01 <p id="p1"> 
02 <jimg src="1mages/photo.jpg" alt=" サン プル 画像 "> 
03 1 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 こ の テキ スト が 画像 の 横 
に 回 り 込 み ま す 。 
| 04 </p> 
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06 <p id="p2"> 
07 2 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 こ の テキ スト が 画像 の 横 
| に 回 り 込 み ま す 。 
| 08 </p> 

09 


| 10 <p id-"p3"> 


11 <jimg src="1mages/photo.jpg" alt=" サ ンプ ル 画 像 "> 
3 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 こ の テキ スト が 画像 の 横 


に 回 り 込 み ま す 。 
12 </p> 
本 に 
14 <p id="p4"> 


15 4 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 り 込み ます 。 こ の テキ スト が 画像 の 横 


に 回 り 込 み ま す 。 
16 </p> 


CSS sample/chapter-07/lecture-7-5/01-float.css 


01 #p1 jimg { float: right: } 
02 #p3 img { float: 1eft: ] 














(サン フル 








1 つめ の 段落 の テキ スト で す 。 こ 
の テキ スト が 画像 の 横 に 回 り 込み 
ます 。 こ の テキ スト が 画像 の 横 に 
回 り 込 み ま す 。 


2 つめ の 段落 の テキ スト で す 。 こ 
の テキ スト が 画像 の 横 に 回 り 込 み 





ます 。 こ の テキ スト が 画像 の 横 に 回 り 込み ます 。 
3 つめ の 段落 の テキ スト で す 。 こ 






の テキ スト が 画像 の 横 に 回 り 込み 
ます 。 こ の テキ スト が 画像 の 横 に 
回 り 込み ます 。 







4 つめ の 段落 の テキ スト で す 。 こ 
の テキ スト が 画像 の 横 に 回 り 込み 
ます 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 











画像 は それ ぞ れ 右 と 左 に 寄せ て 配置 され 、 そ の 横 に テキ スト が 回 り 
込ん で いる 
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> フロ ー ト の 解除 


し か し 、 ウ ィ ン ド ウ の 幅 を 少し 広く し て みる と 、 下 の 図 の よう に 最初 の 2 つの 段落 の 行 数 が 減り 、 
2 つめ の 画像 の 位置 が 右 の 写真 の 下部 を 越え て どん どん 上 に あがっ て き て し まい ます 。 









1 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 

り 込 み ま す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 

2 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 拓 | 

り 込 み ま す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 

3 つめ の 段落 の テキ スト で す 。 

この テキ スト が 画像 の 横 に 回 り 込 み ま す 。 こ の テキ スト が 画 

の 横 に 回 り 込み ます 。 

詩人 4 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 
り 込 み ま す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 



















ウィ ンド ウ の 幅 を 広く する と 、 下 の 画像 が どん どん 上 に あがっ て くる 


状況 に よっ て は これ で も 問題 な いか も し れ ま せん が 、2 つ め の 画 像 と 3 段落 目 の テ キス ト は 常に 
1 つめ の 画像 より も 下 に 表示 させ た い 場 合わ ある で し ょ う 。 そ の よう な 場合 に 使用 する の が 、 指 定 


し た 要素 の 直前 で フロ ー ト を 解除 する clear プロ パテ ィ で す 。 次 の 値 が 指定 で きま す 。 


clear に 指定 で きる 値 


・]1eft 
この 要素 より も 前 で 「float: 1eft:] が 指定 され て いる フロ ー ト を 、 こ の 要素 の 直前 で 解除 し 


ます 。 
・right 


この 要素 より も 前 で 「float: 
し ます 。 


right:」 が 指定 され て いる フロ ー ト を 、 こ の 要素 の 直前 で 解除 


・both 
この 要素 より も 前 で 指定 され て いる 左右 両側 の フロ ー ト を 、 こ の 要素 の 直前 で 解除 し ます 。 


・TOne 
フロ ー ト に 解除 せ ず に その まま に し ます 。 


clear プロ パテ ィ は 、 ブ ロッ クレ ベル 要素 に し か 指定 で き な い 点 に 注意 し て くだ さい 。 次 の サン プ 
ル は 、 先 程 の サン プル の 3 段落 目 に clear プロ パテ ィ を 指定 し て 右側 の フロ ー ト を 解除 し て いる 例 


で す 。 
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HTML sample/chapter-07/lecture-7-5/02-clear.css 








01 <p id="p1"> 

02 <1mg src="1mages/photo.jpg" a1t=" サ ンプ ル 画 像 "> 

03 1 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 こ の テキ スト が 画像 の 横 

に 回 り 込 み ま す 。 

| 04 </p> 

05 

06 <p id="p2"> 

07 2 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 こ の テキ スト が 画像 の 横 


に 回 り 込 み ま す 。 
08 </p> 
09 
10 < く p 1d="p3"> 


11 <jmg src="1images/photo.jpg" alt=" サン プル 画像 "> 
3 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 り 込み ます 。 こ の テキ スト が 画像 の 横 
に 回 り 込 み ま す 。 
| 12 </p> 
13 
14 <p id="p4"> 
15 4 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 こ の テキ スト が 画像 の 横 
| に 回 り 込み ます 。 
| 16 </P> | 





CSS sample/chapter-07/lecture-7-5/02-clear.css 


| 01 #D1 1mg { float: right: } 
02 #p3 jimg { float: left: } 
| 03 #p3 { clear: right: } | 














3 つめ の p 要 素 に clear プロ パテ ィ を 指定 


を っ 作 O の 6 


1 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 
り 込 み ま す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 














2 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 抽 
り 込 み ま す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 


3 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 
り 込 み ま す 。 こ の テキ スト が 画像 の 横 に 回 り 込み ます 。 









4 つめ の 段落 の テキ スト で す 。 こ の テキ スト が 画像 の 横 に 回 
り 込 み ま す 。 こ の テキ スト が 画像 の 横 に 回 り 込 み ま す 。 











3 つめ の p 要 素 の 直前 で フロ ー ト が 解除 され 、3 段 落 目 の テキ スト と 左 の 画像 は 右 の 画像 の 下 
か ら 表 示さ れ て いる 。 こ の サン プル の 場合 は 値 に right で は な く both を 指定 し て も 同じ 表 


示 に な る 
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マヨ ユエ d マ ロ ュ ) 
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フロ ー ト に よる 2 段 組 み レ イア ウト 





CSS で 段 組み レイ アウ ト ( マ ル チ カ ラム ・ レ イア ウト ) を 実現 する 方 法 は いく つか あり ます が 、 現 在 
で は 多く の 場合 フロ ー ト が 利用 され て いま す 。CSS3 の 仕様 の 中 に は 、 段 組み レイ アウ ト 専 用 の 機 
能 ( フ レキ シブ ル ボ ックス ) も ある の で す が 、 こ れ ま で に 何 度 も 仕様 が 変更 され て お り 、 ブ ラウ ザ 
側 の 実装 も まだ 安定 し た 状態 に は な っ て いな いた め 、 現 時 点 で は まだ 利用 し な い 方 が 無難 で す 。 


と 段 に する 範囲 を グル ー プ 化す る 


フロ ー ト で 段 組 み を する 方 法 に も 色々 ある の で す が 、 こ こ で は まず シン プル で 広く 利用 され て いる 
方 法 を 紹介 し ます 。 簡単 に 言え ば 、 各 段 に する 範囲 を div 要 素 で グル ー プ 化し 、 そ の div 要 素 を 左 
右 いずれ か に フロ ー ト させ る だ け で す 。 こ の と き 、 通 常 は すべ て の 段 と それ ら を 含む div 要 素 に も 
幅 を 指定 し ます 。 そ れ で は 簡単 な 2 段 組 み の 例 か ら 見 て み ま し ょ う 。 次 の ソー スコ ー ド と ブラ ウザ 
で の 表示 を 見 て くだ さい 。 こ れ は まだ 、 フ ロー ト を 指定 する 前 の 段階 で す 。 





HTML 


01 <div jid="page"> 


03 <header> 
04 header 要 素 | 
05 </header> 


07 <div id="main"> 
08 メイ ン の 段 の テキ スト で す 。 
09 メイ ン の 段 の テキ スト で す 。 
10 メイ ン の 段 の テキ スト で す 。 
11 メイ ン の 段 の テキ スト で す 。 
2 メイ ン の 段 の テキ スト で す 。 
13 メイ ン の 段 の テキ スト で す 。 
14 </div> 









16 <div id="sub"> 
17 サブ の 段 の テキ スト で す 。 
18 サブ の 段 の テキ スト で す 。 
19 サブ の 段 の テキ スト で す 。 
20 </div> 


22 <footer> 
23 footer 要 素 | 
24 </footer> 


26 </div> 


















CgAPTEF デ ペー ジ 内 の 構造 








CSS 





01 #page { 

02 margin: 0 autoi 

03 width: 300pxi 

04 } 

05 

06 header, footer { 

07 text-align: center: 

08 color: #ff 和 fi 

09 background: #bbb: /* グレ ー か */ 
10 } 


12 #main 【 

13 color: #fff: 

14 background: #fc0: /* 黄色 メ / 
5 半 


17 #Sub { 
18 color: #fff: 
19 background: #390: /* 縁 */ 




















2 段 組 み 前 の 状態 の ソース コー ド 








上 の ソー スコ ー ド を 表示 させ た と ころ 


コン テン ツ 全 体 は 、「1d="page"」 が 指定 され た div 要 素 で グル ー プ 化 さ れ て いま す 。 そ し て 、 
CSS で その 幅 を 300 ピ クセ ル に し 、 左 右 の マー ジン を 「auto] に する こと で コン テン ツ 全 体 を セ 
ンタ リン グ し て いま す (「margin: 0 auto:] は 上 下 の マ ー ジ ン を 0、 左 右 の マー ジン を auto に 
する 指定 で す )。 そ れ 以 外 に は 、 サ ンプ ル が 見 や すく な る よう に ヘッ ダー と フッ ター の テキ スト を 
中 央 揃え に し て 、 各 要素 の 背景 色 を 指定 し て いる だ け で す 。 これから 2 段 組み に する の は 、 
[id="main"] と 「id="sub"] が 指定 され て いる div 要素 の 部 分 で す 。 こ れ ら の div 要 素 は 、 各 
段 の 内 容 を グル ー プ 化し て いる 要素 だ と 考え て くだ さい 。 











ぁみ float プ ロ パ ティ を 指定 する 


で は さっ そく これ ら の 段 に float プロ パテ ィ を 指定 し ます 。2 つ の 段 は 幅 の 合計 が 300 ピ クセ ル に な 
る よう に 、 幅 は 200 ピ クセ ル と 100 ピ クセ ル に し ます 。 次 の 指定 を 追加 し て くだ さい 。 


CSS 





01 ・・・ 

02 

03 #main { 

04 float: righti | < 
05 width: 200Dpx: 道 加 
06 color: #fff: 

07 background: #fc0: /* 黄色 */ 

08 } 

09 

10 #sub { 

11 float: 1eft: | 
12 width: 100px: 追加 
13 colori #ff 和 fi 

14 background: #390: /* 緑 メ / 











source 要 素 の 使用 例 











この 段階 で の 表示 。2 段 組み に な っ た 


ここ で は メイ ン の 段 を 右 、 サ ブ の 段 を 左 に 配置 し まし た が 、 も ちろ ん 左右 を 送 に し て も か まい ませ 
ん し 、 こ の サン プル の 場合 は 両方 の 段 に 「f1oat: right:」 を 指定 し て も 表示 結果 は 同じ に な 
り ま す ( 最 後に フロ ー ト する 段 は 余っ た 場所 に 収まる し か な いた め 、 左 右 ど ちら を 指定 し て も 同じ 
場所 に 収まり ます )。 よ うす る に 、 各 段 が 自分 が 思っ た 側 に 寄せ られ る よう に 左右 を 指定 し て や れ 
ば よい わけ で す 。 

重要 な こと は 、 す べ て の 段 に float プロ パテ ィ を 指定 する と いう こと で す 。 も し 、 フ ロー ト の 状態 
に な っ て いな い 段 が 1 つ で も ある と 、 フ ロー ト し て いな い 段 の コン テン ツ は 長 さ が 短い 段 の 下 に 入 
り 込ん で し まう こと に な り ま す 。 


! ア o CuAP 了 E ょ デー ペー ジ 内 の 構造 








と ァ 段 に し な いと ころ の 段 組み を 解除 する 


と ころ で 、 前 ペー ジ の スク リー ン シ ョ ッ ト を 見 る と 、 フ ッ タ ー が サブ の 段 の 下 に 入り 込ん で し まっ 
て いま す 。 こ れ は フッ ター の 前 で フロ ー ト を 錠 リ ア し て いな いこ と が 原因 で す 。 次 の よう に フッ タ 
ー に clear プ ロ パ ティ を 指定 する と 2 段 組 み の 完成 で す 。 





HTML sample/chapter-07/lecture-7-3/03.html 





01 <div jid="page"> 

02 

03 <header> 

04 header 要 素 

05 </header> 

06 

07 <div id="ma1n"> 

08 メイ ン の 段 の テキ スト で す 。 
09 メイ ン の 段 の テキ スト で す 。 
10 メイ ン の 段 の テキ スト で す 。 
11 メイ ン の 段 の テキ スト で す 。 
12 メイ ン の 段 の テキ スト で す 。 
13 メイ ン の 段 の テキ スト で す 。 
14 </div> 

15 

16 <div id="sub"> 

17 サブ の 段 の テキ スト で す 。 
18 サブ の 段 の テキ スト で す 。 
19 サブ の 段 の テキ スト で す 。 
20 </dtiv> 

21 

22 <footer> 

23 footer 要 素 

24 </footer> 

eb 

26 </d1ivV> 








CSS sample/chapter-07/lecture-7-3/03-2cols.css 





01 #page { 

02 margin: 0 autoi 

03 width: 300px: 

04 } 

05 

06 header, footer { 

07 text-align: center: 
08 color: #fff: 

09 background: #bbb: /* グレ ー */ 
10 } 

MI 

12 #main { 

13 float: right: 

14 width: 200px: 














| ア ! 











15 color: #fff: 

16 background: #fc0: /* 黄色 */ 
7 庄 

18 

19 #sub { 

20 float: left: 

21 width: 100px: 

22 color: #f 和 ff: 

23 background: #390: /* 緑 メ / 
24 } 

25 


26 footer { 
27 clear: both: 追加 
28 } 


footer 要 素 に clear プロ パテ ィ の 指定 を 追加 
































フッ ター の 直前 で フロ ー ト が クリ ア さ れ た 








フロ ー ト に よる 3 段 組 み レ イア ウト (1) 








で は 、 ま っ た く 同 じ 要 領 で 3 段 組 み を 作っ て み ま し ょ う 。 サ ブ を も う 1 つ 増やし て 、2 段 組み の と 
き と ま っ た く 同 じ 要 領 で 指定 する と 簡単 に 3 段 組 み が 実 現 で きま す 。 





HTML sample/chapter-07/lecture-7-5/04.html 





01 <div id="page"> 

03 <header> 

04 header 要 素 | 
05 </header> 


ジ 内 の 構造 









06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 


< く d1iv 1d="main"> 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 


</div> 


<div 1d="sub1"> 
サブ 1 の 段 の テキ スト で す 。 
サブ 1 の 段 の テキ スト で す 。 
サブ 1 の 段 の テキ スト で す 。 


く /div> 


<div id="sub2"> 
サブ 2 の 段 の テキ スト で す 。 
サブ 2 の 段 の テキ スト で す 。 
サブ 2 の 段 の テキ スト で す 。 


く /div> 





















<footer> 
footer 要 素 | 
く /footer> 


く /div> 








CSS 


sample/chapter-07/lecture-7-5/04-3cols-1.css 





01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
2 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 





#page { 


margin: 0 auto: 


width 
} 


header, 


: 400px: 


footer { 


text-align: center: 


color 


: た 中 邊 


background: #bbb: 


} 


#main { 
float 
width 
color 


: righti 
: 200pxi 
: #888: 


background: #eee: /* 薄い グレ ー */ 


} 


#sub1 { 


float: 
width: 


color 


1eft: 
100Dpxi 
日 2 由 由 導 


background: #390: /* 縁 7/ 











k と ど そ に に と 








アキ 


24 ] 

25 

26 #sub2 { 

27 float: left: 

28 width: 100px: 

29 color: #fff: 

30 background: #fc0: /* 黄色 */ 
に 1 


33 footer { 
34 clear: both: 
95 は 














2 段 組 み の と き と 同じ 要領 で 3 段 組 み を 作成 し た ソー スコ ー ド 





の テキ スト で す 。 





3 段 組み に な っ た 


し か し ここ で 、 場 合 に よっ て は 問題 が 1 つ 発生 し ます 。 こ の よう な 指定 方 法 で は 、HTML 内 で 最初 
の 段 に な っ て いる メイ ン を 3 つの 段 の 中 央 に 配置 で き な い の で す 。 最初 に フロ ー ト を 指定 する と 、 
その 段 は も っ と も 左 ま た は も っ と も 右 に 配置 され て し まう か ら で す (同じ 側 に フロ ー ト を 指定 し た 

合 、 先 に 指定 し た も の ほど 外側 に な り 、 あ と か ら 指 定 し た も の ほど 内 側 に な り ま す )。 こ れ は も 
ちろ ん HTML 上 で 順番 を 変更 すれ ば 可能 で す が 、HTML 側 で は 段 の 順序 を 変え た く な い 場 合 は ど 


うす れ ば いい の で し ょ うか 。 
次 に それ を 実現 する 3 段 組み の 方 法 を 紹介 し ます 。 


CgAPrEF デ ペー ジ 内 の 構造 









メイ ン の 段 の テキ ス 
ト で す 。 メイ ン の 段 の テキ 
ト で す 。 メイ ン の 段 の テ 
メイ ン の 邊 の 
テキ スト で す 。 メイ ン の 自 




















フロ ー ト に よる 3 段 組 み レ イア ウト (2) 


ぁ ゆ > 2 段 組み の 中 に 2 段 組み を つく る 


メイ ン を 3 つの 段 の 中 央 に 配置 に は 、 次 の よう に メイ ン と その と な り の 段 を div 要 素 ( 下 の 例 で は 
#contents) で グル ー プ 化し 、2 段 組み の 一 方 の 段 の 中 が さら に 2 段 組み に な っ て いる よう な 状態 
に し ます 。 こ うす る こと で 、 基 本 は すべ て 2 段 組 み と な り 、 グ ルー プ 化 する 段 と フロ ー ト の 方 向 次 
第 で どの 段 を どの 場所 に で も 配置 で きる よう に な り ま す 。 








|-| 


#contents #Sub2 


に 
> 
や 3 
| 











2 つの 段 を グル ー プ 化す る こと で 、 ま ず #contents と #sub2 の 2 段 組 み ( 赤 で 示し た 部 
分 ) が あっ て 、#contents の 中 に #sub1 と #main の 2 段 組 み ( 青 で 示し た 部 分 ) が ある 、 
と いう よう に すべ て 2 段 組 み に し て 扱え る よう に な る 


で は 具体 的 な ソー スコ ー ド を 見 て み ま し ょ う 。HTML 側 に は グル ー プ 化 の た め の <div 
1d="contents"></div> が 追加 され て いる だ け で す 。CSS 側 で は その div 要 素 に float プロ パ 
ティ と width プロ パテ ィ を 指定 し て いま す 。 





HTML 





| 01 
| 02 
| 03 
| 04 


05 
| 06 


< く div id="page"> 


< く header> 
header 要素 | 
く /header> 








6 





CaAPTE ょ デア ー ペ 


・・ 





DO 


07 <div id="contents"> 
08 

09 <div 1d="main"> 
10 メイ ン の 段 の テキ スト で す 。 
11 メイ ン の 段 の テキ スト で す 。 
12 メイ ン の 段 の テキ スト で す 。 
13 メイ ン の 段 の テキ スト で す 。 
14 メイ ン の 段 の テキ スト で す 。 
15 メイ ン の 段 の テキ スト で す 。 
16 メイ ン の 段 の テキ スト で す 。 
17 </div> 
18 

19 <div jid="sub1"> 
20 サブ 1 の 段 の テキ スト で す 。 
21 サブ 1 の 段 の テキ スト で す 。 
22 サブ 1 の 段 の テキ スト で す 。 
23 </div> 
24 

25 < く /dfv> 
26 

27 <div id="sub2"> 
28 サブ 2 の 段 の テキ スト で す 。 
29 サブ 2 の 段 の テキ スト で す 。 
30 サブ 2 の 段 の テキ スト で す 。 
31 </d1v> 
32 


33 く <footer> 
34 footer 要 素 | 
35 </footer> 


36 
37 </d1iv> 






































CSS 





01 #page 【 

02 margin: 0 aut0: 

03 width: 400px: 

04 } 

05 

06 header, footer { 

07 text-align: center: 
08 color: #fff: 

09 background: #bbb: 
10 } 

11 

12 #main { 

が 】 float: right: 

14 width: 200px: 

15 color: #B88: 

16 background: #eee: /* 薄い グレ ー */ 
17 ]} 

18 

19 #sub1 { 

20 float: ]left: 








内 の 構造 














21 width: 100px: 

22 color: #fff: 

23 background: #390: /* 緑 */ 
24 } 


26 #contents { 

27 float: left: 
28 width: 300Ppx: 
29 1} 


31 #sub2 { 

32 float: right: 

9 width: 100Dpx: 

34 color: #fff: 

35 background: #fc0: /* 黄色 */ 
36 } 


38 footer { 
39 clear: both: 
40 1 




















メイ ン を 3 つの 段 の 中 央 に 配置 する ソー スコ ー ド 。3 つ の 段 の うち 2 つ を グル ー プ 化し て いる 部 分 が ポイ ント 








テキ スト で す 。 メイ ン の 段 
の テキ スト で す 。 


上 の ソー スコ ー ド を 表示 させ る と 、 メ イン の 段 が 中 央 に 表示 され る 








と 段 の 高 さ を 揃 える 


これ で メイ ン を 中 央 に 配置 する こと は で きま し た が 、 ス クリ ー ン ショ ッ ト を 見 る と 各 段 の 高 さ が 描 
っ て いな い 点 が 気 に な り ま す 。 し か し 、 フ ロー ト さ せ た コ ン テ ン ツ の 高 さ を 揃え る こと は 、 現 時 点 
で 利用 可能 な CSS の 範囲 で は で きま せん 。 そ こ で 、 こ の よう な 場合 に は 各 段 の 背景 を 透明 に じ 、 
コン テン ツ 全 体 を グル ー プ 化し て いる 要素 に すべ て の 段 の 分 の 背景 を 含ん だ 背景 画像 を 表示 させ 


て 、 あ た か も 高 さ が 揃っ て いる よう に 見 せる 方 法 が と られ ます 。 





2 





これ まで の 例 で 言う と 、#main、#sub1、#sub2 の 背景 を 消し て 、 そ の 代わ り に #page に 次 の よ 
うな 背景 画像 を 表示 させ る と いう こと で す 。 こ うす る こと で 、 実際 に は 高 さ は バラ バラ で も 、 高 さ 





が 揃っ て いる よう に 見 せる こと が で きま す 。 





#page に 指定 する 背景 画像 。3 つ の 段 の 色 が 入っ て いる 








CaAPTE ょ デ 


HTML sample/chapter-07/lecture-7-5/05.html 





01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
2 が 
28 
29 
30 
31 
32 
33 
34 
35 
36 
Ya 





<div id="page"> 


く <header> 
header 要素 | 
</header> 


<div jid="contents"> 













<div id="ma1n"> 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
く /div> 

















<div id="sub1"> 
サブ 1 の 段 の テキ スト で す 。 
サブ 1 の 段 の テキ スト で す 。 
サブ 1 の 段 の テキ スト で す 。 
く /div> 


く /d1iv> 


<div 1d="sub2"> 
サブ 2 の 段 の テキ スト で す 。 
サブ 2 の 段 の テキ スト で す 。 
サブ 2 の 段 の テキ スト で す 。 


く /dfv> 

<footer> 

footer 要 素 | 
< く /footer> 

く /div> 




















CSS sample/chapter-07/lecture-7-5/05-3cols-2.css 
01 #page { 

02 margin: 0 autoi 

03 width: 400px: 

04 background: url(images/background.g1f): ーーーー 追加 
05 } 

06 1 

07 header, footer { 

08 text-align: center: 

09 color: #fff: 

10 background: #bbb: 

前 す 

12 

13 #main { 

14 float: right: 

15 width: 200px: 
エーーー 理 拉 の 指定 を 削除 
18 

19 #sub1 { 

20 float: left: 

21 width: 100px: 

寺 1 Co10ri 填 作 4 彰 太 の 指定 を 削除 
24 

25 #contents { 

26 float: left: 

27 width: 300px: 

28 } 

29 

30 #sub2 { 

31 float: right: 

32 width: 100px: 
ネー 理 朱 の 析 定 を 前 際 
らい) 

36 footer { 

KT clear: both: 

38 } 

















#Dage に 背景 画像 を 表示 させ 、#main、#sub1、#sub2 の 背景 を 消す 








5 

















前 ペー ジ の ソー スコ ー ド を 表示 させ た と ころ 。 高 さ が 揃っ た よう に 見 えて いる 








相対 配置 と 絶対 配置 








position プロ パテ ィ を 使用 する と 、 通 常 の 配置 方 法 と は 異な る 「 相 対 配置 ] また は 「 絶 対 配置 」 
の モー ド に 変更 する こと が で きま す 。 

「 相 対 配置 ] は 通常 表示 され る 位置 か ら 指定 し た 距離 だ け 位置 を ずら す 配 置 方 法 で 、「 絶 対 配置 」 
は 指定 され た 要素 を 新しい レイ ヤー に 移動 させ た 上 で background-position プロパ ティ の よう に 
表示 位置 を 指定 で きる 配置 方 法 で す 。 

いずれ の 配置 モー ド で も 、 表 示 位置 は top、bottom、left、right と いう 4 つの プロ パテ ィ の うち の 
いずれ か を 使用 し て 行い ます 。 ま ず は これ ら に 指定 で きる 値 を 確認 し て か ら 、 そ れ ぞ れ の サン プル 
で 具体 的 に どう 表示 され る の か を 確認 し て み ま し ょ う 。 


position に 指定 で きる 値 


・static 
通常 の 配置 モー ド に し ます 。top、bottom、]eft、right の 各 プ ロ パ ティ は 、 こ の モー ド で 
は 無効 と な り ま す 。 

・relative 
相対 配置 モー ド に し ます 。 こ の モー ド で 配置 位置 を 移動 させ て も 、 他 の 要素 の 配置 位置 に は 一 
切 影響 を 与え ませ ん 。 

・absolute 


絶対 配置 モー ド に し ます 。 こ の 値 が 指定 され た 要素 は 、 元 の レイ ヤー か ら 取 り 除 か れ た 状態 と 
な り 、 別 の 新しい レイ ヤー に 配置 され ます 。 


18o CuAPTek デ ペー ジ 内 の 構造 








Position に 指定 で きる 値 (続き ) 


・fixed 
固定 配置 モー ド に し ます 。 固 定 配置 は 絶対 配置 の 一 種 で す が 、 位 置 指定 の 基準 が background- 
attachment プ ロ パ ティ と 同様 に ペー ジ 全 体 と な を り 、 ス クロ ー ル し て も 動か な く な り ま す 。 
Internet Explorer 6 は 、 こ の 値 に は 対応 し て いま せん 。 


top, bottom, left, right に 指定 で きる 値 


・ 単 位 つき の 実数 
表示 位置 を 単位 つき の 実数 で 指定 し ます 。 


コー 
表示 位置 を 基準 と な る ボッ クス に 対す る パー セン テー ジ で 指定 し ます 。 


・auto 
状態 に 応じ て 自動 的 に 調整 し ます 。 


ぁ b 相対 配置 と 絶対 配置 の 表示 例 


で は 、 こ れ か ら 相 対 配置 と 絶対 配置 を させ る サン プル の 元 の 状態 を 見 て み ま し ょ う 。 こ の 段階 で は 
まだ CSS は 指定 し て いま せん 。 div 要 素 の 中 に img 要 素 を 3 つ 入 れ て ある だ け で す 。 ち な み に 、 ペ 
ー ジ 全体 の 上 と 左 に ある 隙間 は 、body 要素 の マー ジン (ブラ ウザ の 初期 設定 ) で す 。 画 像 と 画像 の 
間 に 隙間 が ある の は 、HTML の ソー スコ ー ド 上 で 入れ て ある 改行 が 半角 スペ ー ス に 置き 換 わ っ た も 
の で 、 改 行 を 入れ な けれ ば 画像 の 隙間 は な く な り ま す 。 


由 
> 
や ョ 
a 
い 





HTML 


| 01 <div> 
02 <jimg 1d="pic1" alt=" 空 の 画像 " src="1mages/sky.jpg"> 
03 <jmg 1d="pic2" alt=" 花 の 画像 " src="images/yel1ow.jpq"> 
| 04 <jimg 1d="pic3" alt=" 草 の 画像 " src="images/green.jpg"> 
| 05 </div> 













相対 配置 と 絶対 配置 の 違い を 確認 する た め に 用 意 さ れ た ソー スコ ー ド 




















上 の ソー スコ ー ド を 表示 させ た と ころ 。3 つ の 画像 が 表示 され て いる 








相対 配置 の 例 

で は 、3 つ の 画像 の うち の 真ん中 の 画像 を 相対 配置 に し て み ま し ょ う 。position プロ パテ ィ の 値 に 
[reTativel *? を 指定 し 、top プロ パテ ィ と left プ ロ パ ティ で 100px を 指定 し ます ( 各 画像 の 大 
き さ は 縦横 200 ピク セル で す )。 





HTML sample/chapter-07/lecture-7-5/06.html 





01 <div> 

02 <img id="pic1" a1t=" 空 の 画像 " src="1mages/sky.Jpg"> | 
03 <img id="pic2" a1t=" 花 の 画像 " src="1mages/yel1ow.jpg"> 

04 <jmg id="pic3" a]t=" 草 の 画像 " src="1mages/green.Jpg"> 

05 </div> 





CSS sample/chapter-07/lecture-7-5/06-position-1.css 





01 #pic2 { 
02 pos1ition: relative: 

03 top: 100px: | 
04 left: 100px: | 
05 ]1 


| ニ ] 

















相対 配置 に し て 、top を 100 ビ クセ ル 、]eft を 100 ビ クセ ル に 指定 


この CSS を 適用 し て ブラ ウザ で 表示 させ て みる と 次 の よう に な り ま す 。 ま ず 、 相 対 配置 を 指定 し 
て いな い 要 素 に は 、 ま つた く 影 響 を 与え で いな い 点 に 注目 し て くだ さい 。 そし て 、 真 ん 中 の 画像 は 
100 ピク セル 下 、100 ピク セル 右 に 移動 し て いま す 。 こ れ が 相対 配置 で す 。 相対 配置 の 場合 、top 
は 上 か ら 下 方 向 へ の 移動 距離 、1eft は 左 か ら 有 方 向 へ の 移動 距離 と な る わけ で す 。 同 様 に 、 
bottom は 下 か ら 上 方 向 へ の 移動 距離 、r1ight は 右 か ら 左 方 向 へ の 移動 距離 と な り ま す 。 














相対 配置 の 表示 結果 


※13 : [relative」 の 英語 で の 発音 は 「 レ ラテ ィ ブ ]」 で す (「 リ レイ ティ ブ 」 で は あり ませ ん )。 





人 ゆ 絶 対 配置 の 例 
次 は 絶対 配置 で す 。 top プロ パテ ィ と left プロ パテ ィ は その まま に し て 、position プロ パテ ィ の 値 
だ け を 「absolute」 に 変更 し て 、 表 示 が どう 変わ る の か を 確認 し て み ま し ょ う 。 

















HTML sample/chapter-07/lecture-7-5/07.html 
] 
01 <div> 
02 <jimg 1d="pic1" a1t=" 空 の 画像 " src="1mages/sky.jpg"> 
03 <img id="pic2" al1t=" 花 の 画像 " src="1mages/yel1ow.jpg"> 
04 <jmg id="pic3" a]1t=" 草 の 画像 " src="1mages/green.jpg"> 
05 </diV> 
CSS sample/chapter-07/lecture-7-5/07-position-2.css 
01 #pic2 { 
02 position: absolute: ーーーー relative か ら absolute に 変更 
03 top: 100px: 
| 04 left: 100px 
| 05 } 

















さき ほど の ソー ス を 総 対 配置 に 変更 


ブラ ウザ で 表示 させ て みる と 、 絶 対 配置 を 指定 し て いな い 要 素 に も 影響 が あつ た こと が 分 か り ま す 。 
絶対 配置 に し た 要素 は 別 レ イヤ ー に 移さ れ た た め 、 元 の レイ ヤー か ら は ば 取り除か れ た 状態 と な り 、 
後続 の 要素 の 表示 位置 が 変わ っ て いる の で す 。 さ ら に 、 絶 対 配置 を 指定 し た 要素 の 配置 位置 も 、 
相対 配置 の と き と は 違っ て いま す 。 絶対 配置 を 指定 し た 要素 は 、 そ れ を 含む 基準 ボッ クス か ら の 移 
動 距 離 で 配置 位置 を 指定 する も の だ か ら で す 。 こ の 場合 の 基準 ボッ クス は ペー ジ 全 体 (html 要素) 
で 、top は その 基準 ボッ クス の 上 か ら 絶 対 配置 を 指定 し た ボッ クス の 上 まで の 距離 、1eft は 基準 
ボッ クス の 左 か ら 絶 対 配置 を 指定 し た ボッ クス の 左 ま で の 距離 と な り ま す 。 同様 に 、bottom は 下 
か ら の 距離 、r1ght は 右 か ら の 距離 と な り ま す 。 な お 、 さ ら に 詳細 に 言う と 基準 ボッ クス の パ デ 
ィング 領域 の 各 上 下 左右 か ら 、 絶 対 配置 され た ボッ クス の マー ジン 領域 の 上 下 左右 まで の 距離 と 
な り ま す 。 











絶対 配置 の 表示 結果 
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絶対 配置 の 基準 ボッ クス は 、 自分 を 含む お ボッ クス の うち 、position プロ パテ ィ の 値 と し て 
「relativel「absolutel「fixed] の いずれ か が 指定 され て いる 最も 近い 要素 が な り ま す 。 そ の 
よう な 要素 が な い 場 合 は 、html 要素 が 基準 ボッ クス と な り ま す 。 特定 の 要素 を 基準 ボッ クス に し 
た い 場 合 は 、 そ の 要素 に 「position: relative:] を 指定 する だ け で 基準 ボッ クス に する こと 
が で きま す ( そ の 場合 は top や 1]eft な どの 指定 は 不要 で す )。 


相対 配置 また は 絶対 配置 (固定 配置 も 含む お ) に な っ て いる 要素 は 、z-index プロ パテ ィ を 使っ て それ 
ら が 重なる 際 の 順序 を 指定 する こと も で きま す 。 次 の 値 が 指定 で きま す 。 


z-index に 指定 で きる 値 


・ 整 数 
重なる 順序 を 整数 で 指定 し ます 。 大 きい 値 ほ ど 上 に 重なっ て 表示 され ます 。 通常 の コン テン ツ 
は 0 の 状態 と な っ て いま す 。 人 負 の 値 も 指定 で きま す 。 


・auto 
親 要素 と 同じ 階層 に し ます 。 


COLCVAM / 


絶対 配置 に よる 段 組 み 


Web ペ ー ジ の レイ アウ ト に 本 格 的 に CSS が 使用 され る よう に な っ て か ら 数 年 間 く らい まで は 、 絶 対 配 
置 に よっ て 段 組 み レ イア ウト を 行っ て いる サイ ト も 多く あり まし た 。 し か し 、 絶 対 配置 で 段 組 み に す 
る と 、 別 レイ ヤー に な っ た コン テン ツ と 他 の コン テン ツ は まっ た く 影 響 し あわ な く な る た め 、 文 字 サ 
イズ を 大 きく し た 場合 な ど に コン テン ツ の 一 部 が 重なっ て 見 えな く な っ て し まう な どの 問題 が 発生 す 
る こと が 分 か っ て きま し た 。 つ まり 、 大 き さ が 変化 し た り 、 内 容量 が 変化 する 可能 性 が ある 要素 を 絶 
対 配置 に する と 、 状 況 に よっ て は 下 の レ イヤ ー の コン テン ツ が 見 えな く な っ て し まう 可能 性 が ある の 
で す 。 そ の よう な 理由 か ら 、 現 在 で は 絶対 配置 に する の は 、 大 き さ や コン テン ツ の 量 が 基本 的 に は 変 
化し な い 画像 や 、 大 き さ が 変化 し て も 影響 の な い 場所 に 配置 する コン テン ツ な ど に ほぼ 限定 され て い 
る よう で す 。 


CaAPTek デ ペー ジ 内 の 構造 











イン ライ ン 有 要素 の 縦 位置 の 指定 





この 章 の 最後 に 、 配 置 と 画像 に 関連 する プロ パテ ィ を も う 1 つ だ け 紹 介し て お きま す 。 い き な り で 
す が 、 次 の サン プル を 見 て くだ さい 。HTML で は h1 要素 の 中 に img 要素 を 入れ 、CSS で は h1 要素 
に 背景 色 (黄色 ) を 指定 し て いる だ け の シン プル な ソー スコ ー ド で す 。 





HTML sample/chapter-07/lecture-7-5/08.html 





01 <h1> 
02 <jimg src="1mages/sky.jpg" alt-" 空 の 画像 "> 
03 </h1> 





CSS sample/chapter-07/lecture-7-5/08-vertical-align.cSSs 





01 h1 { background: #fc0: } 




















黄色 い 背 景 の 見 出し の 中 に 画像 を 入れ た だ け の サン プル 


これ を ブラ ウザ で 表示 させ る と 、 次 の よう に な り ま す 。 こ こ で 注目 し て 欲し い の は 、 画 像 の 下 に 隙 
間 が で き て いる こと で す 。 こ れ は Google Chrome だ か ら こ うな っ て いる と いう わけ で は な く 、 ど 
の ブラ ウザ で も 同じ よう に 隙間 が で きま す 。 これが 仕様 通り の 表示 な の で す 。 














上 の サン プル の 表示 。 画 像 の 下 に 隙間 が で き て いる 
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と イン ライ ン 要 素 の 「 デ ィ セ ンダ ] に 注意 


で は 、 こ の 隙間 の 正体 は 何で 、 そ れ を 消す た め に は どう すれ ば いい の で し ょ うか ? まず この 隙間 
の 正体 で す が 、 こ れ は 「 デ ィ セ ンダ 」 と 呼ば れる も の で 、 ア ルフ ァ ベ ッ ト の 小文字 の 「g] や 「「」」 
の よう に テキ スト の ベー スラ イン より も 下 に は み 出 す 部 分 が ある 文字 の 、 そ の は み 出 す 部 分 を 表示 
させ る た め に 用 意 さ れ て いる 領域 で す 。img 要素 は イン ライ ン 要 素 で す の で 、 普 通 の テキ スト と 同 
じ よ うに 行 の 中 に 表示 され て いる た め 、 つ まり 、 黄 色 い 背景 で 表示 され て いる 領域 は 普通 の イン ラ 
イン の 1 行 で ある た め に 、 こ の よう に ディ セン ダ の 領域 も 表示 され て いる の で す 。 も し h1 要 素 の 
内 容 が テキ スト だ け な ら 何 の 違和感 も な い の で す が 、 テ キス ト が 一 切な く て 画像 だ けが 入っ て いる 
の で ディ セン タダ 領域 が 目立っ て いる と いう わけ で す 。 





ペー スラ イン 一 + ーー 
ee 一 ディ セン ダ 











テキ スト の ペー スラ イン より も 下 に は み 出 す 部 分 を 表示 させ る 領域 を ディ セン ダ と いう 


ぁ ゆ vertical-align プロパ ティ 
CSS に は 、 こ の よう な イン ライ ン 要 素 の 縦 方 向 の 表示 位置 を 調整 する た め の プ ロ パ ティ も 用 意 さ 
れ て いま す 。 そ れ が 、vertical-align プロ パテ ィ で す 。 次 の 値 が 指定 で きま す 。 
vertical-align に 指定 で きる 値 
・baseline 


ベー スラ イン を 親 要素 の 行 の バー スラ イン に 揃え ます 。 画像 の よう に ベー スラ イン が な い 要 素 
の 場合 は 、 そ の 下 を ベー スラ イン に 揃え ます 。 


・top 
上 を 揃え ます 。 


・middle 
中 央 を 揃え ます 。 


・bottom 
下 を 揃え ます 。 


・SUDer 
上 付き 文字 の 表示 位置 に 表示 し ます 。 


CAP イ EE デ ペー ジ 内 の 構造 








vertical-align に 指定 で きる 値 (続き ) 


・sub 
下 付き 文字 の 表示 位置 に 表示 し ます 。 


・ 単 位 つ き の 実数 
親 要素 の ペー スラ イン か ら の 距離 を 単位 つき の 実数 で 指定 し ます 。 正 の 値 は 上 方 向 、 負 の 値 は 
下方 向 へ の 距離 と な り ます 。 


さ ァ 


0 レン スン スー ルン 
親 要素 の ベー スラ イン か ら の 距離 を 、 行 の 高 さ に 対す る パー セン テー ジ で 指定 し ます 。 正 の 値 
は 上 方 向 、 負 の 値 は 下方 向 へ の 距離 と な り ま す 。 


この プロ パテ ィ の 初期 値 は 「baseline] で ある た め 、 特 に 何 も 指定 し な けれ ば 画像 は 先程 の サ 
ンプ ル の よう に 表示 され ます 。 先程 の 画像 に 「vertica1-align: bottom:」| を 指定 する と 、 
画像 の 下 の 隙間 を 消す こと が で きま す 。 


CSS 





01 h1 { background: #fc0: } 
02 fmg [ vertica1l-align: bottom: } ペーーーー この 指定 を 追加 








画像 の 下 の 隙間 を 消す に は 、 こ の よう な 指定 を 追加 すれ ば よい 











上 の サン プル の 表示 


1% テ 








CdAPTE ょ + デ ペー ジ 内 の 構造 






し へ ヘア ナム クタ 


し 2 バー ゴー 
、 導 を 作 る こと が で きま す 。 し か し 、 テ ナビ 


リ は ちょ っ と 特殊 で その 例外 と な 
ナビ ゲー> 


ゲー ショ ン だ 
妨 上 ま が 。 Chapter 8 で は 、 
プロ パテ ィ を まとめ て 紹介 








ナビ ゲー ショ ン に 関連 する 要素 


グロ ー バ ルナ ビ ゲ ー シ ョ ン の よう な ペー ジ 内 の 主要 な ナビ ゲー ショ ン に 対し て 使用 する 要素 
に つい て 説明 し ます 。 


ナビ ゲー ショ ン の セク ショ ン lmrwts 


Chapter 7 で は 、4 つ ある セク ショ ン 関 連 要 素 の うち 、3 つ だ け を 解説 し まし た 。 残り の 1 つが 、 こ 
こ で 説明 する nav 要素 で す 。 











要素 名 | 意味 

| section セク ショ ン 

article 内 容 が それ だ け で 完結 し て いる セク : 2 生 ジ 。 ーー 一 
ga 主 コン テン ツ に は 含ま れ な い セ クシ ョ ン 。。。 
lv 主要 な ナビ ゲー ショ ン の セク ショ ン ーー _ | 





HTML5 の セク ショ ン を あら わす 要素 、 全 4 種類 


nav 要 素 は その 部 分 が ナビ ゲー ショ ン の セク ショ ン で ある こと を 示す 要素 で す が 、 す べ て の ナビ ゲ 
ーション を この 要素 と し て マー クア ッ プ すべ きか と いう と 、 そ う で は あり ませ ん 。 

この 要素 は 、 た と えば 一 般 的 な グロ ー バ ル ・ ナ ビ ゲ ー シ ョ ン の よう に 、 ペ ー ジ 内 で の 主要 な ナビ ゲ 
ーション 部 分 に 対し て の み 使 用 し ます 。 よ く あ る フッ ター 部 分 の リン ク な ど に 対し て 使用 する も の 
で は あり ませ ん 。 あ くま で 、 ナ ビ ゲ ー シ ョ ン の セク ショ ン に 対し て 使用 する も の で ある 点 に 注意 し 
ch 


CaAPrek め ナビ ゲー ショ ン 








リス ト 関 連 の 要素 





ぁみ 3 種類 の リス ト 要 素 


ここ で いう リス ト 関 連 の 要素 と は 、 箇 条 書 き の よ うな 形式 で テキ スト を 表示 させ る 要素 の こと で 、 
直接 的 に は ナビ ゲー ショ ン と は 関係 あり ませ ん 。 し か し 、 ナ ビ ゲ ー シ ョ ン の 各 項 目 を (表示 形式 と 
は 関係 な く 意 味 的 な 面 か ら ) どの 要素 と し て マー クア ッ プ する か と いう こと を 考え た と き に 、 こ の 
要素 以上 に ぴっ た り と 当て は まる 要素 は ほか に あり ませ ん 。 そ の た め 、 ナ ビ ゲ ー シ ョ ン 部 分 を マー 
クア ッ プ する に は 、 一 般 的 に ここ で 紹介 する ul 要素 が 使用 され て いま す 。 こ こ で は 、 そ の ul 要素 
を は じ め と する 93 種類 の 要素 に つい て 説明 し ます 。 














u1 箇条 書き タイ プ の リス ト (範囲 全体 ) | 
o1 番号 付き タイ プ の リス ト (範囲 全体 ー | 
1i | リス ト 内 の 1 項目 間 | 





箇条 書き タイ プ の リス ト 関 連 要 素 


まず 、 箇 条 書き タイ プ の リス ト に は 2 種類 が あり ます 。 リ スト 内 の 各 項 目 に 番号 が つい て いる タイ 
プ と つい て いな い タ イプ で す 。 通常 、 ナ ビ ゲ ー シ ョ ン に 使用 され る の は その 「 番 号 の つい て いな い 
タイ プ ] の 方 で 、 英 語 の 「unordered list| の 先頭 の 文字 を それ ぞ れ と っ て 要素 と いう 名 前 に な 
っ て いま す 。「 番 号 の つい て いる タイ プ ] は 英語 で は 「ordered list] と な る た め 、ol 要 素 と 呼ば れ 
て いま す 。 


ul 要素 と ol 要素 は 、 そ れ ぞ れ の リス ト の 範囲 全体 を 示す も の で 、 そ の 中 の 各 項 目 は li 要素 と し て マ 
ー ク アッ プ し ます 。 要素 の [Ii は 「list item] の 略 で す 。 こ こ で 簡単 な 例 を 示し ます の で 、 タ グ 
の つけ 方 と 基本 的 に どの よう に 表示 され る の か を 確認 し て くだ さい 。 


HTML sample/chapter-08/lecture-8-1/01.html 





01 <u1> 

02 <1i> 番 号 の つい て いな い タ イプ の 項目 1 で す 。</]j> 
03 <1i> 番 号 の つい て いな い タ イプ の 項目 2 で す 。</]j> 
| 04 <]i> 番 号 の つい て いな い タ イプ の 項目 3 です 。</]j> 
05 </u1> 

| 06 

| 07 <o1> 

| 08 <1i> 番 号 の つい て いる タイ プ の 項目 1 で す 。</]j> 
09 <]i> 番 号 の つい て いる タイ プ の 項目 2 で す 。</]j> 

| 10 <1i> 番 号 の つい て いる タイ プ の 項目 3 で す 。</]j> 
11 </o1> 

















ul 要素 と ol 要素 の マー クア ッ プ の 例 








< 番号 の つい て いな い タ イプ の 項目 1 で す 。 
* 番号 の つい て いな い タ イプ の 項目 2 で す 。 
* 番号 の つい て いな い タ イプ の 項目 3 で す 。 


1. 番号 の つい て いる タイ プ の 項目 1 で す 。 
2. 番号 の つい て いる タイ プ の 項目 2 で す 。 
3. 番号 の つい て いる タイ プ の 項目 3 で す 。 





前 ペー ジ の ソー スコ ー ド の 表示 例 


と ァ | 要素 と ol 要素 の 子 要素 


ul 要素 と ol 要素 に 直接 の 子 要 素 と し て 入れ られ る の は 、 ll 要 素 だ け で す 。 し た が っ て 、 そ れ ら の 要 
素 を 入れ 子 に する 場合 に は 、ul 要 素 ま た は ol 要素 内 に 直接 別 の ul 要素 また は ol 要素 内 を 入れ る の 
で は な く 、 上 1 要素 の 中 に 入れ る よう に し て くだ さい 。 ll 要素 の 中 に は イン ライ ン 要 素 で も ブロ ッ ク レ 
ベル 要素 で も 自由 に 入れ る こと が で きま す 。 


HTML sample/chapter-08/lecture-8-1/02.html 














01 <u1> 

02 <]i>u1 要素 の 項目 1</1j> 

03 <]i>u1 要素 の 項目 2 

04 <o1> 

05 <1ji>o1 要素 の 項目 1</1j> 
06 く <]1>o1 要素 の 項目 2</]1> 
07 <1i>o1 要素 の 項目 3</1j> 
08 </o1> 

09 </]j> 

10 <1i>u1 要素 の 項目 3</1j> 

11 </u1> 





リス ト を 入れ 子 に する 場合 の マー クア ッ プ の 例 。 入 れ 子 に する ul 要素 や ol 要素 は 、li 要 素 の 中 に 入れ る 必要 が ある 


* ul 要素 の 項目 1 
* 山 要素 の 項目 2 


1. ol 要素 の 項目 1 

2. ol 要素 の 項目 2 

3. ol 要素 の 項目 3 
* 要素 の 項目 3 








入れ 子 に し た 場合 の 表示 例 
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な お 、ol 要 素 お よび ol 要素 内 の li 要素 に は 、 次 の 属性 が 指定 で きま す 。 


Oo! 要素 に 指定 で きる 属性 


・start=" 開始 番号 " 
番号 を 1 以外 か ら 始 め た い 場 合 に 、 そ の 先頭 の 番号 を 整数 で 指定 し ます 。 


・type=" 番号 の 種類 " 
各 項 目 に 表示 させ る 番号 の 種類 を 指定 し ます 。 次 の 5 種類 の 値 が 指定 で きま す 。 











中 
a | アル ファ ベッ ト ( 小 文字 ) a.b. c・ 
A | アル ファ ベッ ト ( 大 文字 ) 放 A. B. 6 - り 
1 | ロー マヤ 数字 (小文字) 11. 11. 111. _ 」 
1 ロー マ 数 字 (大 文字 ) 較 DD DEJ。 
li 要素 に 指定 で きる 属性 


・Vvalue=" 番号"  ※ol 要素 の 子 要素 で ある 場合 の み 指定 可 
01 要素 内 の その 項目 の 番号 を 整数 で 指定 し ます 。 こ の 項目 の あと に 続く 項目 の 番号 は 、 こ こ で 
指定 し た 番号 に 続く 連 番 と な り ま す 。 





用 語 説明 型 の リス ト liruuswl 





は 
ーーーー = So3 
る 
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ナビ ゲー ショ ン 部 分 に 使わ も れる こと は あま りあ り ま せん が 、 リ スト に 分 類 され る 要素 と し て 用 語 説 
明 型 の リス ト も 紹介 し て お きま し ょ う 。 用 語 説明 型 の リス ト と は 、 箇 条 書 き の よ うに 単純 に 項目 が 
複数 ある タイ プ の リス ト で は な く 、 用 語 と その 説明 の よう に 内 容 の 項目 が ペア に な っ て いる タイ プ 
の リス ト で す 。 用 語 説明 型 の リス ト と は 言っ て も 、 用 語 と その 説明 に 限ら ず 、 質 問 と 回 答 の よう に 
内 容 が 対 に な っ て いる 形式 の デー タ 全 般 に 対し て 使用 する こと が 可能 で す 。 








EE もそ | 意味 

| d1 | 用 語 説明 型 の リス ト (範囲 全体 ) 

| dt | リス ト 内 の 「 用 語 ] に 該当 する 部 分 _ 
| dd リス ト 内 の 「 説 明 ] に 該当 する 部 分 





用 語 説明 型 リ スト の 関連 要素 


ul 要素 と ol 要素 の よう に 、 用 語 説明 型 の リス ト の 全体 を 示す の が 要素 で す 。dI は 「description 
list] の 略 で す 。 そ し て 、 そ の 中 に Ii 要素 の よう に 入れ る 要素 が 、 用 語 説明 型 の リス ト の 場合 は 2 種 
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類 あ り ま す 。「 用 語 (term)」 部 分 に 該当 する dt 要素 と 、「 説 明文 (description)] 部 分 に 該当 する 
dd 要素 で す 。 で は 、 具 体 的 な 使い 方 の 例 を 紹介 し まし ょ う 。 


HTML sample/chapter-08/lecture-8-1/03.html 





01 <d1> - ー ー ーーーーーーー ー 
02 <dt> や れ や れ く </dt> 

03 <dd> 村 上 春樹 の 小説 で よく 目 に する セリ フ 。</dd> 

04 <dt> や れ や れ ……</dt> 

05 <dd> ク レ ヨ ン し ん ちゃ ん が よく 言う セリ フ 。</dd> 

06 <dt> や れ や れ や れ 一 </dt> 

07 <dd> 松 田 優作 が 「 野 獣 死す べし 」 と いう 映画 の 中 で 言っ た セリ フ 。</dd> 

08 </d1> ・ 


dl 要素 の マー クア ッ プ 例 











や れ や れ 
村上 春樹 の 小説 で よく 目 に する セリ フ 。 
や れ や れ … 
クレ ヨン し ん ちゃ ん が よく 言う セリ フ 。 
や れ や れ や れ 一 
松田 優作 が 『 野 獣 死す べし 』 と いう 映画 の 中 で 
言っ た セリ フ 。 





上 の ソー スコ ー ド の 表示 例 


dl 要素 内 に は 、 上 の 例 の よう に dt 要素 と dd 要素 を ペア に し て 複数 人 れる こと が で きま す 。 ペ ア と 
いっ て も dt 要素 と dd 要素 は 常に 1 つ ず つ で ある 必要 は な く 、dt 要 素 また は dd 要素 を 連続 し て 複 
数 入れ る こと も 可能 で す 。 た だ し 、 同 じ ペ ア 内 で は dt 要素 は 必ず dd 要素 より も 前 に 配置 する 必要 
が あり ます 。 





CaApre ょ k 5 ナビ ゲー ショ ン 











リス ト 関 連 の プロ パテ ィ 


ナビ ゲー ショ ン を 作成 する 際 に 必須 と いう わけ で は な い の で す が 、CSS に は ul 要素 と ol 要素 
に 使用 で きる 専用 の プロ パテ ィ が 用 意 さ れ て いま す の で ここ で 紹介 し て お きま す 。 


4= PA と] | 機能 


| 11st-style-type 」 行頭 記号 を 変え る 

| 1ist-sty1e-1mage 行頭 記号 を 画像 に する 

| ist-sty1e-position 行頭 記号 の 表示 位置 を 設定 する 

| ist-style | リス ト 関連 プロ パテ ィ の 一 括 指 定 


リス ト 関 連 の プロ パテ ィ 


な お 、 こ こ で 紹介 する プロ パテ ィ は すべ て 行頭 記号 に 関す れる も の で す の で 、 指 定 する 対象 は li 
要素 と な り ま す 。 し か し 、 こ れ ら の プロ パテ ィ は すべ て その 内 部 の 要素 に も 値 を 継承 する タイ 
プ と な っ て いる た め 、ul 要 素 や ol 要素 に 対し て 指定 する と 、 そ の 子 要素 で ある li 要素 に も 適用 


され る こと に な り ま す 。 





行頭 記号 を 変え る 








* 
3 
3 
る 








list-style-type プロ パテ ィ は 、 行頭 記号 を 変更 する プロ パテ ィ で す 。 
され る 行頭 記号 は 、 ブ ラウ ザ の 種類 に よっ て 異な る 場合 が あり ます 。 
list-style-type に 指定 で きる 値 


・none 
行頭 記号 を 消し ます 。 


・d1sc 
塗り つぶ し た 丸 に し ます 。 


・circle 
白 抜 き の 丸 に し ます 。 


・SqUare 
四角 に し ます 。 


次 の 値 が 指定 で きま す 。 表 示 


19Y 








list-style-type に 指定 で きる 値 (続き ) 


・dec1mal 
数 字 に し ます 。 


・decimal-]eading-zero 
01. 02. 03. ~ 99. の よう に 先頭 に 0 を つけ た 数 字 に し ます 。 


・]1ower-roman 
小文字 の ロー マ 数 字 に し ます 。 


・UPPer-roman 
大 文字 の ロー マ 数 字 に し ます 。 


・]1ower-1atin 
小文字 の アル ファ ベッ ト に し ます 。 


・uPpPer-latin 
大 文字 の アル ファ ベッ ト に し ます 。 


・1ower-alpha 
小文字 の アル ファ ベッ ト に し ます 。 


・UuPDer-alpha 
大 文字 の アル ファ ベッ ト に し ます 。 


・1ower-greek 
小文字 の ギリ シャ 文字 に し ます 。 





HTML sample/chapter-08/lecture-8-2/01.html 


| 01 <u1 id="sample1"> 


02 <11> 項 目 1 く </11> 
03 <11> 項 目 2</11> 
04 <11> 項 目 3</11> 
05 </u1> 


07 <u1 jid="sample2"> 
| 08 <]i> 項 目 1</11> 
<]1> 項 目 2 く </11> 
| 10 <11> 項 目 3</11> 
| 11 </u1> 


13 <ul id="sample3"> 
14 <]1i> 項 目 1 く </11> 

15 <11> 項 目 2 く </11> 

16 <11> 項 目 3 く </11> 

17 </u]> 
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19 … 中 略 … 

20 

21 く <ol id="sample9"> 

22 < く 11> 項 目 1 く </11> 

23 <11> 項 目 2</11> 

24 <11> 項 目 3 く </11> 

25 </ol> 
CSS sample/chapter-08/lecture-8-2/01-list-style-type.csSs 
01 u1。 g1 { 

02 float: left: 

03 margin-right: 40Px: 

04 } 

05 #samplel { 1tst-style-type: none: } 

06 #sample2 { 1tst-style-type: disc: ] 

07 #sample3 { 11ist-style-type: circle: } 

08 #sample4 { ]ist-style-type: square: } 

09 #sample5 { 11st-style-type: decimal: } 

10 #sample6 { 11st-style-type: decimal-]eading-zero: } 
11 #sample7 { 1ist-style-type: 1ower-roman: } 
12 #sample8 { 11st-style-type: upDer-romani } 
13 #sample9 { 11st-style-type: 1ower-alpha: } 





liSt-style-type プロ パテ ィ の 指定 例 





項目 1 

















項目 2 *・ 項目 2 

項目 3 * 項目 3 
*・ 項目 1 1. 項目 1 
= 項目 2 2. 項目 2 
=・ 項目 3 3. 項目 3 
i. 項目 1 | 項目 1 
ii 項目 2 ll 項目 2 
品 . 項目 3 川 . 項目 3 





上 の ソー スコ ー ド の 表示 例 














行頭 記号 を 画像 に する 


list-style-image プロ パテ ィ を 使用 する と 、 行頭 記号 を 画像 に 変え る こと が で きま す 。 指定 で きる 
値 は 次 の 通り で 、 画 像 は ur1( ~ ) の 書式 で 指定 し ます 。 
list-style-image に 指定 で きる 値 


・ur1( 画像 の アド レス ) 
指定 し た 画像 を 行頭 記号 と し て 表示 させ ます 。 


・none 
画像 を 行頭 記号 と し て 表示 させ ませ ん 。 





HTML sample/chapter-08/lecture-8-2/02.html 





| 01 <u1> 
| 02 <]11> 項 目 1</11> 
| 03 <11> 項 目 2</11> | 
| 04 <11> 項 目 3</11> 


| 05 </u1> 


CSS sample/chapter-08/lecture-8-2/02-list-style-image.CSSs 





3 - | 
| 01 ul { 1ist-style-1mage: url(triangle.gif): ] | 


レー に ーーー ーーーーーーーーーー ーーー デキ 











liSt-style-image プロ パテ ィ の 指定 例 


(⑤⑩ サン プル 








上 の ソー スコ ー ド の 表示 例 
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行頭 記号 の 表示 位置 を 設定 する 





list-style-position プロ パテ ィ を 使用 する と 、 行頭 記号 の 表示 位置 を 、 テ キス ト を 表示 させ る 領域 
の 先頭 部 分 に 変更 する こと が で きま す 。 次 の 値 が 指定 で きま す 


list-style-position に 指定 で きる 値 


・outs1ide 
テキ スト を 表示 させ る 領域 の 外側 に 行頭 記号 を 表示 させ ます 。 


・1nside 
テキ スト を 表示 させ る 領域 の 内 側 に 行頭 記号 を 表示 させ ます 。 


行頭 記号 の 表示 位置 を 変更 し て も 、 項 目 内 の テキ スト が 1 行 だ け だ と 違い は よく 分 か り ま せん 。 し 
か し 、 下 の サン プル の よう に テキ スト が 複数 行 に な っ て いる と 、 行 頭 記 号 の 位置 の 違い が は っ きり 
と 分 か り ま す 。 





HTML sample/chapter-08/lecture-8-2/03.html 


01 <u1l 1d="sample1"> 

02 <]1> 行頭 記号 の 表示 位置 と し て 「outside] を 指定 し て いま す 。</11> 
03 <11> 行頭 記号 の 表示 位置 と し て 「outside]」 を 指定 し て いま す 。</11> 
04 </u1> 


06 < く ul 1d="sample2"> 

07 <]1> 行頭 記号 の 表示 位置 と し て 「1inside」 を 指定 し て いま す 。</11> 
08 <112> 行頭 記号 の 表示 位置 と し て 「inside] を 指定 し て いま す 。</11> 
09 く /ul> 


CSS sample/chapter-08/lecture-8-2/03-list-style-position.CSS 


01 #sample1 { 1ist-style-position: outside: } 
02 #Sample2 { list-style-position: inside: } 











list-style-position プロ パテ ィ の 指定 例 


< 
> 
PS3 
3 
る 


















・ 行頭 記号 の 表示 位置 と し て 「outside」 を 指定 
し て いま す 。 


・ 行頭 記号 の 表示 位置 と し て 「outside」 を 指定 
し て いま す 。 


< 行頭 記号 の 表示 位置 と し て 「inside」 を 指定 
し て いま す 。 
・ 行頭 記号 の 表示 位置 と し て 「inside」 を 指定 
し て いま す 。 








前 ペー ジ の ソー スコ ー ド の 表示 例 








リス ト 関 連 プ ロ パ ティ の 一 括 指 定 








list-style プロ パテ ィ を 使用 する と 、 リ スト 関連 プロ パテ ィ の 値 を 任意 の 順 で まとめ て 一 括 で 指定 
で きま す 。 必要 な 値 を 半角 スペ ー ス で 区 切っ て 指定 し ます 。「none」 を 指定 する と 、11st- 
style-type と 1ist-style-1mage の 両方 の 値 が 「none」 に 設定 され ます 。 


list-style に 指定 で きる 値 


・]1st-sty]e-type の 値 
1ist-style-type に 指定 で きる 値 が 指定 で きま す 。 


・]1st-style-1image の 値 
1ist-style-1image に 指定 で きる 値 が 指定 で きま す 。 


・]ist-style-position の 値 
1ist-style-position に 指定 で きる 値 が 指定 で きま す 。 





HTML sample/chapter-08/lecture-8-2/04.html 


| 01 <u1> 
02 <11> 項 目 1</11> | 
03 <]1> 項 目 2</11> 
04 <]1> 項 目 3</11> 

| 05 </u]1> 








CSS sample/chapter-08/lecture-8-2/04-list-style.css 





| 01 ul { 1ist-style: url(triangle.gif) square: ] 














list-style プロ パテ ィ の 指定 例 
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で 人 の 上 本 3 に 





『 項目 1 
ヶ 項目 2 
ヶ 項目 3 








前 ペー ジ の ソー スコ ー ド の 表示 例 


CO と り ハ V / 


行頭 記号 を 画像 に する と 位置 が ずれ る !? 


Internet Explorer 7 以前 で は 、 次 の よう に 行間 を 広く する と 画像 と テキ スト の 表示 位置 が ずれ て し ま 
いま す 。 


| 01 ul { 
]fne-height: 1.7: 
]1ist-style-1mage: url(triangle.gif): 
04 } | 
| 


line-height プロ パテ ィ で 行間 を 1.7 (フォ ント サイ ズ の 1.7 倍 ) に 設定 


9 
マヨ ユマ ロフ 


強 サン ブル - Microsoft L..| =]| 4| 
プイ ル (P) 編集 CE) 表示 


系 ・ の 回 


『 項目 1 
『 項目 2 
『 項目 3 








Internet Explorer 6 で の 表示 結果 。 画 像 と 
テキ スト の 表示 位置 が ずれ て いる 


と ころ が 残念 な こと に 、CSS に は 画像 に し た 行頭 記号 の 位置 を 調整 する プロ パテ ィ は 用 意 さ れ て いま 
せん 。 そ の た め 、 こ の よう な 場合 は 一 般 に 、 行 頭 記 号 は あえ て 消し て 、 表 示 位置 の 調整 が 可能 な 育 景 
画像 を 代わ り に 表示 させ る と いう 、 次 ペー ジ の よう な 対策 が と られ て いま す 。 











01 ul { 
02 line-height: 1.7: 
03 ]ist-style: none: 
04 } 
05 11 { 
padding-1eft: 12Px: 

/ background: ur1l(triangle.gif) no-repeat left center: 


lst-style プロ パテ ィ で 行頭 記号 を 消し 、 行 頭 記号 は 背景 画像 と し て 表示 させ る と 表示 位置 が 調整 可能 と な る 


| 
| 
| 
」 
| 
| ( 
| 
1 
1 


族 サン ブル - MicrosoftI 
ファ イル (CE) 編集 CE) 表示 ⑩ 





Internet Explorer 6 で の 表示 結果 。 位 置 の 
ずれ は 目立た な く な っ て いる 


た だ し 上 の 例 の よう に 指定 し て いる と 、 た と えば 項目 内 の テキ スト が 2 行 に な っ た 場合 は 、 行 頭 記号 
は 1 行 目 と 2 行 目 の 間 に 表 示さ れる こと に な り ま す 。 複 数 行 に も 対応 させ る 場合 は 、 背 景 画 像 の 表示 
位置 が 1 行 目 に 合う よう に 変更 する 必要 が あり ます 。 
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表示 形式 を 変え る プロ パテ ィ 


今度 は 送 に 、 リ スト と 特別 に 関連 が 深い わけ で は な い の で す が 、 ナ ビ ゲ ー シ ョ ン を 作成 する 
際 に よく 使わ れる 「 表 示 形 式 を 変え る プロ パテ ィ 」 に つい て 説明 し ます 。 





表示 形式 を 変更 する 








display プロ パテ ィ は 、 ナ ビ ゲ ー シ ョ ン を 作成 する 際 に 欠か せな い プ ロ パ ティ の 1 つ で す 。 こ の プ 
ロ パ ティ を 使用 する と 、 イ ン ラ イン 要素 を ブロ ッ ク レ ベル 要素 の よう に 表示 させ た り 、 ブ ロッ クレ 
ベル 要素 を イン ライ ン 要 素 の よう に 表示 させ る こと な ど が で きま す 。 指定 で きる 表示 形式 ( 値 ) は 、 
次 の 通り で す 。 


display に 指定 で きる 値 


・1n1ine 
イン ライ ン 要 素 と 同様 の 表示 に し ます 。 


・block 
ブロ ッ ク レ ベル 要素 と 同様 の 表示 に し ます 。 


9 
を と と そ に の 


・1n1ine-block 
ボッ クス 自体 は イン ライ ン 要 素 と 同様 に 配置 され ます が 、 そ の 内 部 は ブロ ッ ク レ ベル 要素 の よ 
うに 複数 行 を 表示 で きる ボッ クス に し ます (フォ ー ム の テキ スト 入力 欄 で 複数 行 を 入力 で きる タ 
イプ の も の と 同様 の 表示 形式 に な り ま す ) 。 


・none 
ボッ クス を 消し ます (ボッ クス が 無い 状態 に な り ま す )。 


ぁみ display プロ パテ ィ の 使用 例 


で は 、 こ の プロ パテ ィ を 使用 する と 、 具 体 的 に どの よう に 表示 が 変化 する の か を 見 て み ま し ょ う 。 
次 の サン プル の HTML フ ァイル で は 、 イ ン ラ イン 要素 で ある span 要素 と ブロ ッ ク レ ベル 要素 で あ 











る div 要素 の ペア を 4 つ 配 置 し て いま す 。 そ れ ぞ れ に は 、samp]e1 一 sample4 と いう クラ ス 名 を 
つけ て いま す 。 


HTML sample/chapter-08/lecture-8-3/01.html 





01 <span class="sample1"> サ ンプ ル 1<br>span 要 素 く /span> 
02 <d1v class="sample1"> サ ンプ ル 1<br>div 要 素 く </div>. 


04 <span class="sample2"> サ ンプ ル 2<br>span 要 素 く /span> 
05 <div class="sample2"> サ ンプ ル 2<br>div 要 素 く </div> 


07 <span class="sample3"> サ ンプ ル 3<br>span 要素 く /span> 
-08 <d1v class="sample3"> サ ンプ ル 3<br>div 要 素 く /d1v> 


10 <span class="sample4"> サ ンプ ル 4<br>span 要 素 く /span> 
11 <div class="sample4"> サ ンプ ル 4<br>div 要 素 く /div> 


サン プル の HTML ソ ー ス 。span 要素 と div 要 素 の ペア が 4 つ あ る 











まず は display プロ パテ ィ を 指定 し て いな い 状 態 の 表示 を 確認 し て お きま し ょ う 。span 要 素 と div 
要素 の 要素 内 容 に は br 要素 を 入れ て 意図 的 に 改行 させ て あり ます の で 、 こ の よう な 表示 に な っ て 
いま す 。 











display プロ パテ ィ を 指定 し て いな い 状 態 で の 表示 


これ に 対し て display プロ パテ ィ を 次 の よう に 指定 する と 、 表 示 結 果 は この よう に 変わ り ま す 。 ま ず 、 
サン プル 1 の span 要素 と iv 要素 は と も に イン ライ ン 要 素 の 表示 に な っ て いま す 。 同様 に に サン プ 
ル 2 は 両方 と も プロ ッ ク レ ベル 要素 の 表示 に な っ て いま す 。 サ ンプ ル 3 は 消え て な く な り 、 サ ンプ 
ル 2 の 下 に は サン プル 4 の ボッ クス が 表示 され て いま す 。 サ ンプ ル 4 の よう に 、 イ ン ラ イン 要素 と 
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同様 に 横 に 並ぶ けれ ども その 内 部 が ブロ ッ ク レ ベル 要素 の よう に な っ て いる の が [inline- 


sample/chapter-08/lecture-8-3/01-display.css 





inline: } 
block: } 
none: } 


block] で す 。 

CSS 

| 01 span, div { color: #fffi ] 
| 02 span { background: #f6d: } 
| 03 div { background: #69e: 
| 04 

| 05 .samplel1 { display: 

| 06 .sample2 { display: 

| 07 .sample3 { display: 

| 08 .sample4 { display: 


inline-block: } 


ーー お Mb 
それ ぞ れ に display プロ パテ ィ の 異な る 値 を 指定 


ピリ 月 | 


CSS 適 用 後 の 表示 





見 えな い 状 態 に する 














< 
『 コ 
PS3 
品 
る 








display プロ パテ ィ の 値 と し て 「nonel」 を 指定 する と 、 そ の 要素 の ボッ クス は 消え て な く な り ま し 
た 。Visibility プロ パテ ィ を 使用 する と 、 要 素 自体 を 消す の で は な く 、 見 えな い の だ けれ ども 場所 は 
確保 まれ で いる 状態 (つま りあ た か も 透明 に な っ た よう な 状態 ) に する こと が で きま す 。 


20 て 














visibility に 指定 で きる 値 


・visible 
ボッ クス を 見 える 状態 に し ます 。 


・hidden 
ボッ クス を 見 えな い 状 態 に し ます 。 


ぁみ visibility プロ パテ ィ の 使用 例 


で は 、 具 体 的 に どう な る の か を 、2 つ の 画像 を 表示 させ た サン プル で 確認 し て み ま し ょ う 。HTML 
ソー ス は 次 の 通り で す 。 


HTML sample/chapter-08/lecture-8-3/02.html 


1 <jmg id="sample1" src="tpp.jpg" a1t=" タン ポポ の 画像 "> 
く jimg id-="sample2" src="tpp.jpg" alt=" タンポポ の 画像 "> 


サン プル の HTML ソー ス 。 img 要素 が 2 つ あ る の み 


は じ め に 、 こ の 状態 で の 表示 を 確認 し て お きま し ょ う 。 こ の 段階 で は 単純 に 画像 が 2 つ 並 ん で 表示 
され て いま す 。 




















CSS を 適用 し て いな い 状 態 で の 表示 
で は 、 次 の CSS を 適用 d す せ て み ま し ょ う 。 


左側 の 画像 の 画像 は 消え まし た が 、 右 側 の 画像 は 表示 位置 が 変わ ちる こと も な く 、 そ の まま 表示 さ 
290A 宮 95 
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CSS sample/chapter-08/lecture-8-3/02-visibility.css 


01 #sample1 { visibi1lity: hidden: +} 


左側 の 画像 に 「visibi1ity: hidden:」 を 指定 





⑤ サン ブル 


と ぅ ご で 電 G CK 

















左側 の 画像 は 表示 され な く な っ た が 、 右 側 の 画像 の 表示 位置 な ど は 一 切 変わ 
っ て いな い 


は み 出 る 部 分 の 表示 方 法 を 設定 











overflow プロ パテ ィ を 使用 する と 、 ボ ックス の 幅 や 高 さ を 指定 し て いる 状態 で 、 要 素 内 容 が ボッ 
クス 内 に 入り きら な く な っ て し まっ た と き に どの よう に 表示 させ る の か を 設定 する こと が で きま 
す 。 た だ し 、 こ の プロ パテ ィ を 適用 で きる の は ブロ ッ ク レ ベル の 状態 の 要素 に 限り ます 。 次 の 値 が 
指定 で きま す 。 


9 
ヨミ ゴツ アロ) 


overflow に 指定 で きる 値 


・visible 
ボッ クス か ら は み 出 た 部 分 も 表示 し ます 。 


・hidden 
ボッ クス か ら は み 出 た 部 分 は 表示 し ませ ん 。 


・SCrOo11 
ボッ クス か ら は み 出 た 部 分 は 表示 し ませ ん が 、 ス クロ ー ル に よっ て すべ て の 内 容 が 見 られ る よ 


うに し ます 。 


・autOo 
必要 に 応じ て (内 容 が 入り きら な く な る と ) スクロール 可能 に し ます 。 








2o る 


次 の サン プル で は 、 幅 100 ピ クセ ル ・ 高 さ 100 ピ クセ ル の ボッ クス 中 に 、 幅 200 ピ クセ ル ・ 高 さ 
200 ピク セル の 画像 を 表示 させ て いま す 。 overflow プロ パテ ィ の 値 に よっ て 、 次 の よう に 表示 結 
果 が 変わ り ます 。 





HTML sample/chapter-08/lecture-8-3/03.html 


01 < く p id="sample1"> 

02 <img src="tpp.jpg" al1t=" タンポポ の 画像 "> 
03 </p> 

04 <p id="sample2"> 

05 <1mg src="tpp.Jpg" alt=" タン ポポ の 画像 "> 
06 </p> 

07 <p 1d="sample3"> 

08 <1mg src="tpp.jpg" alt=" タンポポ の 画像 "> 
09 < く /p> 


CSS sample/chapter-08/lecture-8-3/03-overflow.css 
01 pt 


02 width: 100px: 
03 height: 100px: 


04 } 
05 #Sample1 { overflow: hidden: } 
06 #sample2 { overflow: scrol1: } 


#sample3 { overflow: visible: } 








overflow プロ パテ ィ の 指定 例 


上 の ソー スコ ー ド の 表示 結果 (200 x 200 ピ 
クセ ル の 画像 を 100 X 100 ビ クセ ル の ボッ ク 
ス 内 に 「hidden」「scro11」「visib1e」 の 順 
及 で 表示 させ た 状態 ) 
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ナビ ゲー ショ ン の 作り 方 


で は 、 こ の 章 で 覚え た 要素 と プロ パテ ィ を どの よう に 使っ て ナビ ゲー ショ ン を 作る の か を 、 簡 
単 な 例 で 紹介 し ます 。 ま ず は 、HTML 側 の マー クア ッ プ か ら 確 認 し て いき まし ょ う 。 


ナビ ゲー ショ ン の マー クア ッ プ 














ここ で は 、 ヘ ッ ダ ー 部 分 に よく ある よう な グロ ー バ ル ・ ナ ビ ゲ ー シ ョ ン を 作成 する と 仮定 し て 、 全 
体 を nav 要 素 の 中 に 入れ ます 。 そ の 内 部 に は 要素 を 配置 し て 、 ナ ビ ゲ ー シ ョ ン の 各 項目 は li の 中 
に 入れ ます 。 

各 項 目 は ナビ ゲー ショ ン と し て 機能 する よう に ga 要素 で リン ク に し て お きま す 。 








HTML 
01 <nav> 
02 く ul> 
03 <li><a href="a.htm1"> 項 目 A く </a></11> | 時 
04 <1i><a href="b.htm1"> 項目 B</a></11> ま 
05 <1i><a href="c.htm1"> 項 目 C</a></]1> 2 
| 06 <li><a href="d.htm1"> 項 目 D く </a></]1> ta 
| 07 <li><a href="e.htm1"> 項 目 E</a></]1> 
08 く /u] > 
| 09 </nav> 


ナビ ゲー ショ ン 部 分 の マー クア ッ プ 














この 時 点 で は 、 普 通 の リス ト と し て 表示 され る 


2o5 














リス ト の 項目 を 横 に 並べ る 








ここ か ら 徐 々 に CSS を 追加 し て 、 ナ ビ ゲ ー シ ョ ン ら し く 見 える よう に し て いき ます 。 ま ず は リス ト 
の 各 項 目 が 横 に 並ぶ だ よう に し ます 。 リ スト に は 行頭 記号 が つい て いた り と その まま で は 扱い に くい 
の で 、li 要 素 に 「dWSpIayilbIloeki」 を 指定 し ます 。 

こう する こと で 行頭 記号 も 消え て 、l 要 素 が 普通 の ブロ ッ ク レ ベル 要素 と 同じ よう に 扱え る よう に 
な る わけ で す 。 あ と は 、OChapter 7 で 学習 し た 段 組 み の 要領 で 6 履 字 器 パ デ 古 を 指定 する と 各 項 
目 は 横 に 並び ます 。 ち な み に 、bogdy 要素 に マー ジン を 指定 し て いる の は 、 サ ンプ ル と し て 見 や す 
くす る た めで す 。 


CSS 

| body { 

02 margin-top: 80px: 
03 } 

04 


05 nav 11 { 
06 display: block: 
07 width: 80Ppx: 


| 08 float: left: 
| 


ー 








リス ト の 各 項 目 を 横 に 並べ る た め の ソ ー ス コー ド 











行頭 記号 が 消え 、 リ スト の 項目 が 横 に 並ん だ 
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リン ク の 範囲 を 確認 する 














この 状態 だ と ボッ クス の 範囲 な ど が 分 か り に くい の で 、 各 項目 内 の a 要 素 に 背景 色 (と 文字 色 ) を 指 
定 し ます 。 

背景 色 を 表示 させ て みる と 、 背 景 が つく の は テキ スト の ある 狭い 範囲 に 限定 され て いる こと が 分 か 
り ま す 。 リ ンク と し て クリ ッ ク で きる の も 背景 が 表示 され て いる 範囲 で すす の で 、 そ の 領域 を 広げ る 
必要 が あり ます 。 


CSS 





| 01 nava { 

02 color: #fff: 
| 03 background: #69e: 
| 04 } 





a 要 系 に 背景 色 と 文字 色 を 指定 する 











この 時 点 で クリ ッ ク が 可能 な の は 、 水 色 の 背景 が 表示 され て いる 狭い 領域 の み 





リン ク の 範囲 を 拡張 する 








a 要 素 は イン ライ ン 要 素 で ある た め 、width プロ パテ ィ や height プロ パテ ィ を 指定 し て 大 き さ を 変 
更 す る こと は で きま せん 。 イ ン ラ イン 要素 の 場合 は 、 高 さ は フォ ント サイ ズ や 行間 な ど で 決 まり ま 
すし 、 状 況 に よっ て 行 を 折り 返す 場合 も ある の で 幅 も 指定 で き な い の で す 。 そ れ で は ナビ ゲー ショ 
ン の 項目 と し て は 不都合 で す の で 、a 要 素 も ブロ ッ ク レ ベル 化し て し まい まし ょ う 。 

次 の 指定 を 追加 し ます 。 











CSS 





01 nava 

02 colori #fffi 

03 background: #69e: 

04 display: bl1ock: キーーーー この 行 を 追加 
D9i『 


a 要 素 も ブロ ッ ク レ ベル 化す る 








順 目 A 項目 B 





背景 が 表示 され る 範囲 (= クリ ッ ク 可 能 な 範囲 ) が 広がっ た 








表示 を 調整 する 











この 状態 で は ナビ ゲー ショ ン ら し く 見 えな い の で 、 表 示 を 調整 し ます 。 ま ず 、 行 間 と パ デ ィ ン グ の 
指定 を 追加 し て 背景 の 表示 され る 領域 を 調整 し 、 各 項目 の 左側 に 白い ボー ダー を 表示 させ て 境界 
が ハッ キリ と 分 か る よう に し ます 。 あ と は テキ スト を 中 敵 揃 玩 に し て 下線 を 消し た ら 、 シ ンプ ル で 
は あり ます が ナビ ゲー ショ ン ら し く な り ま し た 。 


CSS 





01 nav a { 

02 colori #fff: 

03 background: #69e: 
04 display: block: 
05 1ine-height: 1.0: 
06 padding: 6px 0: 
07 border-left: 1px solid #fff: 
08 text-align: center: 

09 text-decoration: none: 
10 } 


ナビ ゲー ショ ン ら し く 見 える よう に 表示 を 調整 する 
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ナビ ゲー ショ ン ら し く 見 える よう に な っ た 








カー ソル が 上 に ある と き の 処 理 








一 般 に 、 ナ ビ ゲ ー シ ョ ン の 項目 は カー ワル を の せる と 背景 が 変わ る な ど な ん ら か の 変化 を 見 せま す 。 
最後 に その 処理 を 追加 し まし ょ う ( こ れ で 完成 で す の で ナビ ゲー ショ ン 部 分 全体 の 表示 指定 を 掲載 
し て お きま す )。 ナ ビ ゲ ー シ ョ ン 作 成 の ポイ ント は 、 上 要素 と a 要 素 の 両方 に 「display: 
block:」 を 指定 する こと で す 。 あ と は 段 組 み の 要領 で 横 に 並べ た り 、 細 か い 表 示 の 調整 を お こ な 
うだ け で 簡単 に 作成 で きま す 。 








HTML sample/chapter-08/lecture-8-4/01.html 





01 <nav> 

| 02 <u1> 

| 03 <1i><a href="a.htm1"> 項 目 A く </a></11> 

| 04 <1i><a href="b.htm1"> 項 目 B く </a></11> 
05 <li><a href="c.htm1"> 項 目 C く </a></11> 
06 <li><a href="d.htm1"> 項 目 D く </a></1j> 
07 <jj> く <a href="e.htm1"> 項 目 E く /a></1 ュ > 
08 </u1> 
09 </nav> 











CSS sample/chapter-08/lecture-8-4/01-navigation.css 





01 nav 11 { 
| 02 display: block: 
03 width: 80px: 
04 fl1oat: 1eft: 
OS 全 
| 06 nav at 
| 07 color: ff: 
| 08 background: #69e: 
| 09 display: block: 
































カー ソル を の せる と 痛 景色 が 変わ る よう に な っ た 


2! 邊 CgAPrer の ナビ ゲー ショ ン 








HTML で は 、 検索 な ど に 使用 する テキ ス ト 入 力 欄 の よぅ な 入 


カ ・ 選択 の た め の バ パー ツ が 多く 用 意 さ れ て いま す 。 CHapter 9 
で は 、 その よう な バー し ( 束 ) の マー ク ァ 


ッ プ の 仕方 、 お よび それ ら に 関連 する CSS の プロ パティ に つ 
いて 説明 し ます 。 








フォ ー ム 関連 の 要素 


HTML5 で は 、 フ ォ ー ム に 関連 する 新しい 要素 が 追加 され て いる だ け で な く 、 既 存 の 要素 に 対 
し て も 新しい 属性 が 大 量 に 追加 され て いま す 。 し か し 、Opera の よう に それ ら の 機能 の 多く を 
サポ ー ト し て いる ブラ ウザ も ある 一 方 で 、 現 時 点 で は それ ら を サポ ー ト し て いな い ブ ラウ ザ も 
多く 存在 し て いま す 。 そ の た め 、( 特 に 確実 に デー タ を 送信 する 必要 の ある フォ ー ム に お いて は ) 
その よう な 新 機能 の 多く は まだ あま り 利 用 され て いな い の が 現状 で す 。 と いう わけ で 、 こ こ で 
は 現時 点 で 利用 で きる 要素 と 属性 を 中 心 に フォ ー ム に つい て 説明 し て いき ます 。 


フォ ー ム 全体 を 囲む 要素 




















form 要素 は 、 要 素 内 と し て 含ん で いる フォ ー ム 関連 要素 で 入力 ・ 選 択 し た デー タタ の 送信 先 や 送信 
方 法 を 指定 する 要素 で す 。 テ キス ト 入 力 欄 や メニ ュー な ど は 必ず し も この 要素 の 中 に 入れ て 使用 す 
る 必要 は あり ませ ん が 、 デ ー タ を サー バー な ど に 送信 する の で あれ ば form 要素 内 に 入れ る 必要 が 
あり ます *?。form 要素 に は 次 の 属性 が 指定 で きま す 。 


form 要素 に 指定 で きる 属性 


・action=" 送信 先 の URL" 
デー タ の 送信 先 の URL を 指定 し ます 。 


・method=" 送信 方 法 " 
デー タ の 送信 方 法 を 指定 し ます 。「get (初期 値 )] また は 「post] が 指定 で きま す 。「get」 は 
URL の 後ろ に デー タ を つけ 加え て 送信 する 方 法 で す 。「post] は URL と は 別に (HTTP リク エス 
ト と は 別 の デー タ 本 体 と し て ) デー タ を 送信 し ます 。 


・enctype="MIME タ イプ " 
method 属 性 の 値 が 「post] の と き の 、 デ ー タ を 送信 する 際 の MIME タイ プ を 指定 し ます 。 
「application/x-www-form-urlencoded( 初 期 値 )]「multipart/form-datal「text/ 
plain] の いずれ か が 指定 で きま す 。 デ ー タ と し て ファ イル を 送信 する 場合 に は 「mu1tipart/ 
form-data」 を 指定 する 必要 が あり ます 。 


・name=" フォ ー ム の 名 前 " 
フォ ー ム を 参照 する た め の 名 前 を 指定 し ます 。 


※14 : HTML5 で は 、form 要素 の 中 に 含ま れ て いな い 要 素 で も サー バー に 送信 する こと が 可能 な よう に 新しい 属性 が 追加 され て い 
ます が 、 ブ ラウ ザ の 対応 状況 か ら 現時 点 で は ほとん ど 利 用 され て いな いよ う で す 。 


216 CnAPTE を うき フォ ー ム と テー ブル 











入力 欄 や ポタ ン を 生成 する 要素 mssi 














フォ ー ム で 使用 され る テキ スト 入力 欄 や 各種 ボタ ン 類 の 多く は 、input 要 素 と いう た っ た 一 種類 の 
空 要素 に よっ て 生成 され ます 。 input 要 素 を どの フォ ー ム 部 品 に する の か は 、type 属 性 で 指定 し ま 
す 。 フォー ム 部 品 の 種類 に よっ て 、 使 用 する 属性 と その 機能 は 違っ て きま す 。 ユ ー ザ ー に よっ て 入 
力 ・ 選 択 さ れ た 値 は 、name 属 性 で 指定 し た 名 前 と ペア で 送信 され ます 。 


input 要素 に 指定 で きる 属性 


・type=" フォ ー ム 部 品 の 種類 " 
この nput 要素 を 、 ど の フォ ー ム 部 品 に する の か を 次 の キー ワー ド で 指定 し ます 。 


キー ワー ド | フォ ー ム 部 品 の 種類 


text 
password 
| checkbox 
radio 
file 
hidden 
submit 
reset 
「button 


1mage 


1 行 の テキ スト 入力 欄 (一 般 テ キス ト 用 ) 


| 1 行 の テキ スト 入力 欄 (一 般 パ スワ ー ド 用 ) 


チェ ッ ク ボ ックス 


ラジ オ ボ タ ン 

」 ファ イル 送信 用 部 品 

| 画面 上 に は 表示 させ ず に 送信 する テキ スト 
送信 ポタ ン 


リセ ッ ト ボ タン 


| 汎用 ボタ ン 
画像 の 送信 ボタン 


・name=" 部 品 の 名 前 " 
この フォ ー ム 部 品 の 名 前 を 指定 し ます 。 入力 ・ 選 択 さ れ た デー タ は 、 こ の 名 前 と ペア で 送信 さ 
れ ま す 。 同じ 選択 項目 内 で の チェ ッ ク ボ ックス また は ラジ オ ボ タ ン に は 同じ 名 前 を つけ る 必要 


が あり ます 。 


・value=" 初期 値 プ ラベ ルン 送信 値 " 


S 
3 エ d ツ yh 


テキ スト 入力 欄 の 場合 は 、 そ こ に 最初 か ら 入 力 さ れ て いる 初期 値 と な り ま す 。 ボ タン の 場合 は 、 
その ボタ ン の ラベ ル と な り ま す 。 チ ェ ッ クボ ックス また は ラジ オ ボ タ ン の 場合 は 、 そ の 項目 を 
選択 し た と き に サー バー に 送信 され る 値 と な り ま す 。 


・s1ze=" 文字 数 " 


テキ スト 入力 欄 の 文字 数 を 指定 し ます 。 こ の 属性 に 指定 し た 値 に よっ て テキ スト 入力 欄 の 幅 が 
変化 し ます 。 初 期 値 は 20 で す 。 


・maxlength=" 最大 文字 数 " 
テキ スト 入力 欄 に 入力 で きる 最大 の 文字 数 を 指定 し ます 。 


・checked 
チェ ッ ク ボ ックス また は ラジ オ ボ タ ン を 選択 し た 状態 に し ます 。 








input 要素 に 指定 で きる 属性 (続き ) 


・readonly 
この フォ ー ム 部 品 を 変更 不可 (選択 は 可能 ) の 状態 に し ます 。 


・disabled 
この フォ ー ム 部 品 を 変更 ・ 選 択 不可 の 状態 に し ます 。 


・Ssrc=" 画像 の URL" 
画像 の 送信 ボタ ン に する 際 の 「 画 像 の URL] を 指定 し ます 。 


・width=" 幅 " 
画像 の 送信 ボタン の 画像 の 幅 (実際 の 幅 で は な く 表 示さ せる 幅 ) を ビク セル 数 で 指定 し ます 。 


・height=" 高 さ " 
画像 の 送信 ボタ ン の 画像 の 高 さ (実際 の 高 さ で は な く 表 示さ せる 高 さ ) を ビク セル 数 で 指定 し ま 


す 。 


・a1t-" 代替 テキ スト " 
画像 の 送信 ボタ ン の 画像 が 表示 で き な い 場合 に 、 そ の 代わ り と し て 使用 する テキ スト を 指定 し 


ます 。 


みゆ ァ input 要素 の 使用 例 


で は 、input 要 素 が 実際 に どの よう に 使用 され 、 ブ ラウ ザ で は どの よう に 表示 され る の か を サン プ 
ル で 確認 し て み ま し ょ う 。 


HTML sample/chapter-09/lecture-9-1/01.html 


<form action="sample.cgi" method="post"> 

02 <P> 

03 text: く jnput type="text" name="type01"> 

)4 </p> 

05 <P> | 
06 password:<finput type="password" name="type02"> | 
り ) </P> | 
08 <Pp> 

9 checkbox : 

10 <jinput type="checkbox" name="type03" value="c1" checked> 項目 1 

11 <jnput type="checkbox" name="type03" value="c2"> 項 目 2 

12 <jinput type="checkbox" name="type03" value="c3"> 項 目 3 | 
13 く /P> 

14 < く P> 

15 Pad10: | 
16 <jinput type="radio" name=" も type04" value="r1" checked> 項目 1 

17 <jinput type="radio" name="type04" value="r2"> 項 目 2 

18 <jnput type="radio" name="type04" value="r3"> 項 目 3 
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| 19 
| 20 <p> 
21 file:< く jnput type=-"file" name="type05"> 
| 22 </p> 
| 23 <p> 
24 hidden : <input type="hidden" value="h1" name="type06"> 


く /P> 


| 
| 25 </p> 
| 26 <P> 
27 submit : く jnput type="submit"> 
8 </p> ] 
29 <P> 
30 reset: く 1nput type="Teset"> 
| 31 </p> 
| 32 <p> 
| 33 button : <jnput type="button" value=" ボ タン "> 
34 </P> 
| 35 <Pp> 
36 1mage:<1input type="1mage" src="she]1.jpg" alt=" 送 信 "> 
| 37 </p> 
| </form> 











input 要 素 の 使用 例 。 こ れ ら の フォ ー ム 部 品 は すべ て input 要 素 の type 属 性 に 異な る 値 を 指定 し た も の 











サン ブル テキ スト 


text : 
PaSSWOrd | eee 

checkbox : 還 項 目 ] 口 項目 2 ロ 項 目 3 
radio : @ 項 目 1 〇 項目 2 〇 項目 3 
file : (ファ イル を 選択) 選択 され て いま せん 
hidden : 

Submit : (送信 ) 

reset : 

button : 


<y 2 


input 要 素 の 表示 例 。 表 示 結果 は 、 ブ ラウ ザ や OS の 種類 に よっ 
て 異な る 





image : 
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CA へ PE た 


て の た りん びび 


仕様 上 は も っ と 多く の 部 品 が 用 意 さ れ て いる !? 


実は ここ まで に 紹介 し た フォ ー ム 


キー ワー ド 
部 品 は すべ て HTML4 で すでに 定 ren 
義 さ れ て いた も の で 、HTML5 で 
は さら に 右 の よう な キー ワー ド が 
pe 属性 の 値 と し て 指定 で きる よ 
うに な っ て いま す 。 た だ し 、 そ れ 
ら の 多く に 対応 し て いる の は 現時 "TeLine 


上 京 で は Opera ぐ らい で 、Internet 
Explorer 9 な ど は すべ て に 未 対応 93te 

と な っ て いま す 。 こ れ ら は 仕様 が "onth 
まだ 確定 し て いる も の で も あり ま 
せん し 、 一 般 的 な ペー ジ で 利用 で time 


week 


きる よう に な る に は まだ まだ 時 間 number 
が か か る と 思わ れ ま す 。 | range 
color_ 


HTML5 で 追加 され た input 要 素 の type 属 性 の 値 


sample/chapter-09/lecture-9-1/02.html 


] <Pp>search: < く jnput type="search"> く /p> 
02 <p>te1 : く jnput type="te1"> く /p> 
く p>ur1 : く jnput type="ur]1"> く /p> 
04 < く p>ema11 : <input type="emai1"> く </p> 
5 く p>datet1me : <1nput type= 
"datetime"> く </Pp> 
06 <p>datetime-1oca]l : <jnDut tyDe= 
"datetime-1oca1"> く /p> 
く p>date : <jinput type="date"> く </p> 
)8 <Pp>month: く input type="month"> く </p> 
| く p>week : <jinput type="week"> く </p> 
10 < く p>t1me: <fnput type="tjme"> く /p> 
く p>number : <jinput type="number"> く /p> 
く p>range:< く input type="range"> く /p> 


13 <p>color:< く jinput type="color"> く /P> 


HTML5 で 追加 され た type 属 性 の 値 の 使用 例 





フォ ー ム と テー ブル 


| datet1me-]oca1 





| フォ ー ム 部 品 の 種類 
| 1 行 の テキ スト 入力 机 (検索 用 ) 
1 行 の テキ スト 入力 欄 (電話 番号 用 ) 
| 1 行 の テキ スト 入力 欄 (URL 用 ) 
| 1 行 の テキ スト 入力 欄 (メール アド レス 用 ) 
| 日 時 の 入力 用 部 品 (タイ ム ソ ゾー ン あ り ) 
| 日 時 の 入力 用 部 品 (タイ ム ゾ ー ン な し ) 
年 月 日 入力 用 部 品 
| 年 月 入力 用 部 品 
| 年 週 入力 用 部 品 
| 時 刻 入力 用 部 品 
| 数 値 入力 用 部 品 
| スラ イド 型 部 品 
| 外用 部 品 








て > うつ 2 ー lm 


SearCh : サン プル 








tel : os-1234-s67s 

Url : htp:7//examplecom/ 

email : infogexamplecom 。 
datetime : [zoz-e-e 議 zo 生 | urc 
datetime-local : | zenz-oe-o 議 zoo | 軸 
date : (zonz=oe-oe 市 

month : (zonz=oe 

week : |zonzawzi 軸 

tme : ozso 軸 


number : s 軸 





range : ーーーGーーーーーーー 一 












品 3 の 6  ・ 


在 の サン プル ソー ス を Opera 11 で 表示 させ た と ころ 





の 














複数 行 の テキ スト 用 の 入力 欄 








textarea 要 素 は 、 複 数 行 の テキ スト 入力 欄 を 表示 させ る 要素 で す 。input 要 素 で 生成 可能 な の は 1 
行 の テキ スト 入力 欄 だ け で 、 複 数 行 の テキ スト 入力 欄 が 必要 な 場合 に は textarea 要素 を 使用 する 
必要 が あり ます 。 こ の 要素 は 空 要素 で は な く 、 有 要素 内 容 と し て 入れ た テキ スト が 、 初 期 状 態 で テキ 
スト 入力 欄 に 入力 され た 状態 で 表示 され ます 。 

次 の 属性 が 指定 で きま す 。 


textarea 要素 に 指定 で きる 属性 


・cols=" 文字 数 " 
テキ スト 入力 欄 の 1 行 の 文字 数 を 指定 し ます 。 こ の 属性 に 指定 し た 値 に よっ て テキ スト 入力 欄 の 
幅 が 変化 し ます 。 初 期 値 は 20 で す 。 


・Prows=" 行 数 " 
テキ スト 入力 欄 の 行 数 を 指定 し ます 。 こ の 属性 に 指定 し た 値 に よっ て テキ スト 入力 欄 の 高 さ が 
変化 し ます 。 初 期 値 は 2 で す 。 


・name=" 部 品 の 名 前 " 
この フォ ー ム 部 品 の 名 前 を 指定 し ます 。 入力 され た デー タ は 、 こ の 名 前 と ペア で 送信 され ます 。 


・maxlength=" 最大 文字 数 " 
入力 可能 な 最大 の 文字 数 を 指定 し ます 。 


・readonly 
この フォ ー ム 部 品 を 変更 不可 (選択 は 可能 ) の 状態 に し ます 。 


・disabled 
この フォ ー ム 部 品 を 変更 ・ 選 択 不可 の 状態 に し ます 。 


ま 
に 人 | 
本 
い 


22! 


HTML sample/chapter-09/lecture-9-1/03.html 


| <form action="sample.cg1" method="post"> 
02 <p> 

03 <textarea rows="7" cols="50"> 

4 サン プル テキ スト 

05 </textarea> 

05 </P> 

7 く /form> 


textarea 要素 の 使用 例 















| サン ブル テキ スト 





前 ペー ジ の ソー スコ ー ド の 表示 





要素 内 容 を ラベ ル と し て 表示 する 要素 


基本 的 な ボタ ン は input 要 素 で 生成 可能 な の で す が 、 そ れ と は 別に button 要 素 と いう ボタ ン 専 用 
の 要素 も 用 意 さ れ て いま す 。input 要 素 は 空 要素 で し た が 、button 要素 の 場合 は 要素 内 容 を その ま 
ま ボ タン 上 の ラベ ル と し て 表示 で きる 点 が 大 きく 異な り ま す 。 

button 要素 に 指定 で きる 属性 


・type=" ボタ ン の 種類 " 
ボタ ン の 種類 を 次 の キー ワー ド で 指定 し ます 。 


キー ワー ド | ボタン の 種類 


| submit 送信 ボタン (初期 値 ) 
reset リセ ッ ト ボ タン 
button 汎用 ポ ボタン 


・name=" 部 品 の 名 前 " 
この フォ ー ム 部 品 の 名 前 を 指定 し ます 。 こ の 名 前 と value 属 性 の 値 が ペア で 送信 され ます 。 


・disabled 
この フォ ー ム 部 品 を 変更 ・ 選 択 不 可 の 状態 に し ます 。 


・value=" 送信 値 " 
サー バー に 送信 され る 値 を 指定 し ます 。 こ の 値 と name 属 性 の 値 が ペア で 送信 され ます 。 











HTML sample/chapter-09/lecture-9-1/04.html 





01 <p> 
02 <button type="subm1it"> 送 信 ボ タン </button> 
03 <button type="reset"> リ セッ ト ボ タン </button> 
04 <button type="button"> 
5 < く strong> 汎 用 ボタ ン </strong> 
06 <br> 

り ) <1mg src="she11.jpg"> 
08 </button> 
3 < く /P> 













CSS sample/chapter-09/lecture-9-1/04-button.css 





01 button[type="button"] { 
02 font-s1ze: ]arge: 

03 border-radius: 10PpxX: 
04 color: white: 

05 background: orange: 
06 } 




















button 要 素 の 使用 例 





送信 ボタン | | リセ ッ ト ポ タン 





上 の ソー スコ ー ド の 表示 
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メニ ュー を 構成 する 要素 





メニ ュー は 、 フ ォ ー ム の 部 品 の 中 で 唯一 複数 の 要素 の 組み 合わ せ で 作ら れる 部 品 で す 。 メ ニュ ー の 
構造 は 、 リ スト と 同じ よう に な っ て いて 、 全 体 を select 要 素 で 囲い 、 各 選択 肢 は option 要 素 と い 
う 空 要素 で 指定 し ます 。 そ れ ぞ れ に 指定 で きる 属性 は 次 の 通り で す 。 


select 要素 に 指定 で きる 属性 


・name=" 部 品 の 名 前 " 
この フォ ー ム 部 品 の 名 前 を 指定 し ます 。 選択 され た デー タ は 、 こ の 名 前 と ペア で 送信 され ます 。 


・s1ze=" 行 数 " 
一 度 に 見 られ る 項目 の 数 ( 行 数 ) を 指定 し ます 。 こ の 属性 を 指定 する と 、 メ ニュ ー で は な く リ ス 
ト ボ ックス に な り ま す 。 


・multiple 
複数 の 項目 を 選択 で きる よう に し ます 。 


・disabled 
この フォ ー ム 部 品 を 変更 ・ 選 択 不可 の 状態 に し ます 。 


option 要素 に 指定 で きる 属性 


・value=" 送信 値 " 
サー バー に 送信 され る 値 を 指定 し ます 。 こ の 値 と select 要 素 の name 属性 の 値 が ペア で 送信 さ 
れ ま す 。 


・selected 
この 項目 を 選択 し た 状態 に し ます 。 


・disabled 
この フォ ー ム 部 品 を 変更 ・ 選 択 不 可 の 状態 に し ます 。 


HTML sample/chapter-09/lecture-9-1/05.html 


く D> 

選択 し て くだ さい : 
3 <Select> 
4 <option> メニュー 項目 1</option> 
<option> メニ ュー 項目 2</option> 
06 <option> メニ ュー 項目 3</option> 
07 <option> メニ ュー 項目 4</option> 
08 く option> メニュー 項目 5</option> 
09 </select> 

10 く /P> 


select 要 素 ・option 要素 の 使用 例 
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⑤ サン フル 





選択 し て くだ さい : Y メニ ュー 項 昌 1 | 
メニ ュー 項目 2 
メニ ュー 順 目 3 


メニ ュー 斑 目 5 








前 ペー ジ の ソー スコ ー ド の 表示 








フォ ー ム 部 品 と テキ スト を 関連 づけ る 要素 








た と えば 「 名 前 : 」 の よう に テキ スト 入力 欄 の 前 に テキ スト が 配置 され て いた と し て も 、 そ の テキ 
スト と テキ スト 入力 欄 は 内 部 的 に は 結び つい て いま せん 。 そ の た め 、 そ の 「 名 前 : 」 と 書か れ た 部 
分 を クリ ッ ク し た と し て も 、 テ キス ト 入 力 欄 に は 何 の 反応 も あり ませ ん (入力 を 開始 する に は 直接 
テキ スト 入力 欄 を クリ ッ ク す る 必要 が あり ます )。 同様 に 、 チ ェ ッ クボ ックス や ラジ オ ボ タ ン も テ 
キス ト 部 分 を クリ ッ ク し て も 一 切 反応 は な く 、 直 接 ボ タン 部 分 を クリ ッ ク し な けれ ば な り ま せん 。 
し か し 、 そ れ で は 一 般 的 な アプ リケーション と は 反応 が 違う こと に な り 使い に くい の で 、 テ キズ ド 
と フォ ー ム 部 品 を 内 部 的 に 関連 づけ る た め の 要 素 が 用 意 さ れ て いま す 。 それ が label 要 素 で す 。 


ぁ b label 要素 の 使い 方 


label 要素 で テキ スト と フォ ー ム 部 品 を 関連 づけ る に は 2 つの 方 法 が あり ます 。1 つ は テキ スト と フ 
オー ム 部 品 を 一 緒 に label 要 素 の 内 容 と し て 入れ て し まう 方 法 で す 。 もう 1 つ は 、 フ ォ ー ム 部 品 に 
id 属性 を 指定 し て お き 、 内 容 と し て テキ スト だ け を 入れ た label 要 素 の for 属 性 の 値 に その id 属性 
の 値 を 入れ て 関連 づけ る 方 法 で す 。 た だ し 、Internet Explorer 6 が for 属 性 を 使っ た 方 法 に し か 対 
応 し て いな いた め 、 一 般 的 に は 現在 で も for 属 性 を 使う 方 法 が 多く 採用 され て いま す 。 

label 要素 の 内 容 と し て 入れ られ る の は 、 イ ン ラ イン 要素 だ け で す ( 各 種 フ ォ ー ム 部 品 も イン ライ ン 
要素 に 分 類 さ れ ま す )。 ブ ロッ クレ ベル 要素 は 入れ られ ませ ん の で 注意 し て くだ さい 。 





label 要素 に 指定 で きる 属性 


・for=" 部 品 の 1d" 
フォ ー ム 部 品 の id 属性 の 値 を 指定 し て 、 こ の ラベ ル と 関連 づけ ます 。 











HTML sample/chapter-09/lecture-9-1/06.html 





01 <p> 

02 <labe]l for="parts1"> ラ ベル : </1abel> 

03 <input 1d="parts1" type="text"> ram 

04 </p> | 
05 <p> | 


| 06 <1nput jid="parts2" type="checkbox" name-"cb"> 際 ae 
07 <label for="parts2"> 項 目 A</1abel> 

| 08 <1nput 1d="parts3" type="checkbox" name="cb"> 

| 09 <1abe1 Gb ニー ニー 

」 10 <input 1d="parts4" type="checkbox" name="cb"> Eee 

| 11 <label for="parts4"> 項 目 C く </1abel> 

12 </p> 

13 <P> 


14 <1nput 1d="parts5" type="radio" DNS 0 
15 <labe] for="parts5"> 項 目 D</1abel> 
| 16 く <1nput 1d="parts6" type="rad1o" 5 
| 17 <]abe] for="parts6"> 項 目 E</1abel> 

18 <1nput id="parts7" type="radio" CI 
19 <labe] for="parts7"> 項 目 F</1abel> 

20 </Pp> 
label 要素 の 使用 例 














罰 上 の ソー スコ ー ド の 表示 。 
テキ スト 部 分 を クリ ッ ク す 
る と 反応 する よう に な っ て 
四 いる 


口 項目 A 口 項目 B ロロ 項目 C 


〇 項目 D 〇 項目 E O 項目 F 





フォ ー ム 部 品 な ど を グル ー プ 化す る 要素 

















各種 フォ ー ム 部 品 や その ラベ ル の テキ スト な ど を グル ー プ 化す る に は 、 fieldset 要 素 を 使用 し ます 。 
グル ー プ の 表示 方 法 が 特に 決め られ て いる わけ で は あり ませ ん が 、 一 般 的 な ブラ ウザ で は グル ー プ 
全体 を 囲う よう な 線 が 表示 され ます 。 


fieldset 要素 で グル ー プ 化し た 範囲 に タイ トル を つけ る に は 、legend 要 素 を 使用 し ます 。legend 
要素 は 、fieldset 要 素 で マー クア ッ プ し た 範囲 の 先頭 に 1 つ だ け 入 れる こと が で きま す 。 
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fieldset 要素 に 指定 で きる 属性 


・name=" 部 品 の 名 前 " 
この 要素 の 名 前 を 指定 し ます 。 


・disabled 
この フォ ー ム 部 品 を 変更 ・ 選 択 不 可 の 状態 に し ます 。 


次 の 例 で は 、 前 の サン プル を その まま 使っ て fieldset 要素 で グル ー プ 化し て いま す 。 


HTML sample/chapter-09/lecture-9-1/07.html 


| 01 <fieldset> 
02 <]legend> グル ー プ の タイ トル </]egend> 
03 <p> 
04 < く 1abe] for="parts1"> ラ ベル : く /1abel> 
05 < く 1input 1d="parts1" type="text"> 
06 < く /P> 
7 <P> 
8 < く 1fnput 1d="parts2" type="checkbox" name="cb"> 
<1abel for="parts2"> 項 目 A</1abe1> 
< く fnput id="parts3" type="checkbox" name="cb"> 
< く ]abe] for="parts3"> 項 目 B く </1abe]> 
| 2 <input id="parts4" type="checkbox" name="cb"> 
3 <]abel for="parts4"> 項 目 C く </1abe1> 
14 </p> 
15 く <Pp> 
5 く jnput id="parts5" type="radio" name="rb"> 
<label for="parts5"> 項 目 D</1abe1> 
8 く input 1d="parts6" type="radio" name="rb"> 
中 < く 1abel for="parts6"> 項 目 E</1abe]> 
2 <input 1d="parts7" type="radio" name="rb"> 
」 3) <1abel for="parts7"> 項 目 F</1abe1> 
22 </p> 
| 23 </fieldset> 





グル ー プ の タイ トル 
ラベ ル : 

口 項 目 A ロ 項目 B 
O 項目 D O 項目 E 








上 の ソー スコ ー ド の 表示 





回 
て に が 】 








フォ ー ム 関連 の プロ パテ ィ 


ここ で 、 フ ォ ー ム の た め に 用 意 さ れ て いる と いう わけ で は あり ませ ん が 、 フ ォ ー ム と 関連 し て 
使用 され る こと が 多い プロ パテ ィ を いく つか 紹介 し て お きま し ょ う 。 


リサ イズ 可能 に する !csssml 


Google Chrome や Safari、Firefox の 比較 的 新しい バー ジョ ン を 使用 し て いる 人 で あれ ば 、 複 数 行 
の テキ スト 入力 欄 の 大 き さ が 変え られ る よう に な っ て いる こと に 気づい て いる と 思い ます 。 適用 対 
象 が テキ スト 入力 欄 に 限定 され て いる わけ で は あり ませ ん が 、 こ の よう に ボッ クス の 大 き さ を ユー 
ザー が 変更 で きる よう に する か どう か は resize プ ロ パ ティ で 設定 で きま す 。 


resize に 指定 で きる 値 


・both 
幅 と 高 さ の 両方 を リサ イズ 可能 に し ます 。 


・horizonta1 
幅 だ け を リサ イズ 可能 に し ます 。 


・Vertica1 
高 さ だ け を リサ イズ 可能 に し ます 。 


・none 
リサ イズ が で き な い 状態 に し ます 。 


resizes プロ パテ ィ の 初期 値 は Inone] な の で す が 、Google Chrome や Safari、Firefox で は デフ 
ォ ル トス タイ ル シ ー ト で textarea 要素 の resize プロ パテ ィ の 値 が 「both」 に 設定 され て いま す 。 
その た め 、 他 の 値 を 指定 し な いか ぎり 、 幅 と 高 さ の 両方 が リサ イズ 可能 な 状態 と な っ て いま す の で 
注意 し て くだ さい 。 
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と ブラ ウサ の 対応 状況 に つい て 


resize は CSS3 の プロ パテ ィ で す が 、 す で に 勧告 候補 と な っ て いま す の で ベン ダー プレ フィ ックス 
は 特に つけ る 必要 は あり ませ ん 。 こ の プロ パテ ィ に は Firefox 4 以降 の ほか 、Google Chrome と 
Safari が 古い バー ジョ ン か ら 対 応 済み な で す 。 た だ し 、Internet Explorer は バー ジョ ン 9 で も 未 対応 


で す 。 





HTML sample/chapter-09/lecture-9-2/01.html 





01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
| 15 
16 
17 
18 
19 
20 
21 
22 
23 
24 


| 01 
| 02 
| 03 
04 








CSS 


#sample2 { resize: both: } 


く P> 

く textarea id="sample1" rows="3" cols="30"> 
初期 状態 く /textarea> 

く /P> 


く PD> 

<textarea id="sample2" rows="3" cols="30"> 
both ( 幅 と 高 さ を 変更 可 ) </textarea> 

く /Pp> 


く P> 

<textarea id="sample3" rows="3" cols="30"> 
horizonta1 ( 幅 の み 変 更 可 ) </textarea> 

く /P> 


く P> 

<textarea 1d="sample4" rows="3" cols="30"> 
vertica1 ( 高 さ の み 変 更 可 ) </textarea> 

く /P> 


く D> 

く textarea 1d="sample5" rows="3" cols="30"> 
none (変更 不可 ) </textarea> 

く /P> 


sample/chapter-09/lecture-9-2/01-resize.css 








#sample3 { resize: horizonta]l: ] 
#sample4 { resize: vertical: } 
#sample5 { resize: none: } 











resize プロ パテ ィ を textarea 要 素 に 適用 し た 例 
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both ( 幅 と 高き を 変更 可 ) 



















horizontal ( 幅 の み 変 更 可 ) 














vertical ( 高 さ の み 変 更 可 ) 
































前 ペー ジ の ソー スコ ー ド を 表示 させ た と ころ ( 何 も 操作 し て い この よう に textarea 要素 の 大 き さ を 変え る こと が で きる 
な い 状 態 ) 


ボッ クス に 影 を つけ る |csssml 








. box-shadow プロ パテ ィ を 使用 する と 、text-shadow プロ パテ ィ と 同様 の 指定 方 法 で ボッ クス に 
影 を つけ る こと が で きま す 。 た だ し 、box-shadow プロ パテ ィ で は 4 つめ の 数 値 と し て 影 を 拡張 さ 
せる 距離 が 指定 で き 、「inset] と いう キー ワー ド を 指定 する こと で 影 を ボッ クス の 内 部 に 表示 させ 
られ る よう に も な っ て いま す 。 次 の 値 が 指定 で きま す 。 


box-shadow に 指定 で きる 値 


・1nset 
影 を ボッ クス の 内 側 に 表示 させ ます 。 こ の 値 を 指定 し な けれ ば 、 影 は ボッ クス の 外側 に 表示 さ 
4 お 292 


・ 単 位 つき の 実数 
影 の 「 右 方 向 へ の 移動 距離 」「 下 方 向 へ の 移動 距離 ]」「 ぼ か す 範 囲 ]「 上 下 左右 に 拡張 させ る 距離 ] 
は 単位 つき の 実数 で 指定 し ます 。 

9 
色 の 書式 に 従っ て 影 の 色 を 指定 で きま す 。 
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box-shadow に 指定 で きる 値 (続き ) 


・none 
影 を 表示 させ ませ ん 。 


数 値 は 、 影 の 「 右 方 向 へ の 移動 距離 」「 下 方 向 へ の 移動 距離 」「 ぼ か す 範 囲 ]「 上 下 左右 に 拡張 させ る 
距離 ] の 順に 半角 スペ ー ス で 区 切っ て 指定 し ます 。「 ぽ か す 範 囲 ] と 「 上 下 左右 に 拡張 させ る 距離 」 
は 指定 し な く て も か まい ませ ん 。 影 の 色 は 、 こ れ ら の 数 値 全 体 の 前 か 後ろ に 半角 スペ ー ス で 区 切っ 
て 指定 し ます 。 キ ー ワ ー ド 「inset」 を 指定 する 場合 は 、 さ ら に それ ら 全 体 の 前 か 後ろ に 半角 スペ 
ー ス で 区 切っ て 指定 し ます 。 


ぁ pk フラ ウザ の 対応 状況 に つい て 


この プロ パテ ィ に は 、Inernet Explorer も バー ジョ ン 9 か ら 対 応 し て お り 、 ベ ンダ ー プ レフ ィ ッ ク 
ス な し で 指定 で きま す 。Firefox の 古い バー ショ ン や Safari に も 対応 させ る 場合 に は それ ら の ベン 
ダー プレ フィ ックス を つけ た 指定 も 追加 し て くだ さい 。 





HTML sample/chapter-09/lecture-9-2/02.html 


01 <p> 

02 <textarea 1d="sample1" rows="5" cols="30"> 
3 < く /textarea> 

04 </p> 

05 

06 <p> 

07 <textarea 1d="sample2" rows="5" cols="30"> 
| da </textarea> 

09 </p> 





CSS sample/chapter-09/lecture-9-2/02-box-shadow.CSSs 


j」 textarea { border: 1px solid #666: ] 


03 #sample1 { 
04 -webk1it-box-shadow: 5DX 5pX 10px #999: 


05 -moz-box-shadow: 5DX 5Dx 10px #999: 
06 box-shadow: 5px 5px 10pxX #999: 
07 } 


08 #sample2 { 

09 -webkit-box-shadow: inset 5px 5px 10px #999: | 
| 10 -moz-box-shadow: jinset 5Dpx 5px 10px #999: | 
| 11 box-shadow: inset 5px 5px 10px #999: 

F 揚 ) 

















box-shadow プロ パテ ィ の 使用 例 





3 エコ マロ う 
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前 ペー ジ の ソー スコ ー ド の 表示 


て CO た り AAAY 


textarea 要素 に box-shadow プロ パテ ィ が 適用 され な い 現 象 


実は し 、 上 の サン プル で textarea 要素 に border プロ パテ ィ を 指定 し て いる の に は 訳 が あり ます 。 こ の 指 
定 が な いと 、Google Chrome と Safari で は 、textarea 要 素 に box-shadow プロ パテ ィ の 影 が 表示 さ 
れ な い の で す 。 


Webkit 系 の ブラ ウザ (Google Chrome や Safari など) で は 、 フ ォ ー ム 部 品 の 表示 を プラ ッ ト フ ォ ー ム 
ご と に 統一 し た も の と する た め に webkit-appearance と いう 独自 の プロ パテ ィ が 設定 され て お り 、 
それ に よっ て この 現象 が 起こ る こと が 確認 され て いま す 。 こ の webkit-appearance に よる 表示 設 
定 は 、textarea 要素 に 「-webkit-appearance: none:] と 指定 する か 、 ボ ポー ダー を 指定 する こと 
で 解除 され 、 それ に よっ て 影 も 表示 され る よう に な り ま す ( こ れ は 2012 年 7 月 現在 の Google Chrome 
と Safari で 確認 し た 情報 で 、 将 来 的 に 変更 され る 可能 性 が あり ます )。 
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パソ コン を 操作 し て いる と 、 テ キス ト 入 力 欄 を クリ ッ ク し た と き や ボ タン の 上 に カー ソル を の せ た 
と き な ど に 、 そ の まわ り に 線 が 表示 され る こと が あり ます 。 そ れ に よっ て 、 た と えば テキ スト 入力 
欄 が た くさ ん 並ん で いて も 、 今 キー ボー ド を 打つ と どの テキ スト 入力 欄 に 入力 され る の か が 一 目 で 
分 か る よう に な っ て いる わけ で す 。 そ の よう な 用 途 で 使わ れ て いる 線 が 、 ア ウト ライ ン で す 。 


アウ トラ イン は 、 見 た 目 は ボー ダー と よく 似 て いま す が 、 ボ ックス の 一 部 で は な く ボ ックス の 上 に 
表示 され ます 。 そ の た め 、 ア ウト ライ ン を 表示 させ て も ボッ クス の 大 き さ が 変わ っ た り 、 レ イア ウ 
ト が 崩れ た りす る こと は 一 切 あ り ま せん 。 表 示さ れる 位置 は 、 ボ ックス の ボー ダー の まわ り (外側 ) 
と な り ま す 。 ま た 、 ボ ー ダ ー の よう に 上 下 左右 を 別々 に 指定 する こと は で きず 、 上 下 左右 の 線 種 ・ 
太 さ ・ 色 は 常に 同じ に な り ま す 。 


アウ トラ イン 関連 と し て は 次 の プロ パテ ィ が 用 意 さ れ て いま す 。 各 プロ パテ ィ に 指定 で きる 値 は ボ 
ー ダ ー と ほぼ 共通 し て いま す が 、 線 種 に 「hidden] が 指定 で き な い 点 と 、 色 に 「invert] が 指 
定 で きる 点 だ けが 異な っ て いま す 。 


プロ バテ ィ 名 設定 対象 | 指定 で きる 値 の 数 
| out1line-style 上 下 左右 の アウ トラ イン の 線 種 | 1 
out11ne-width 上下 左 右 の アウ トラ イン の 太 さ | 1 
lout1ne-color 上下 左右 の アウ トラ イン の 色 | 1 
| outline ” ” 上下 左右 の アウ トラ イン の 線 種 と 太 さ と 色 、 線 種 太 さ / 色 





アウ トラ イン を 設定 する プロ パテ ィ 。「 線 種 / 太 さ 色 ] に は 半角 スペ ー ス で 区 切っ て 順不同 で 必要 な 
値 を 指定 で きる 。 指定 し な い 値 は 初期 値 と な る 


outline-style に 指定 で きる 値 


・none 
アウ トラ イン を 表示 し ませ ん 。 


・sol1id 
アウ トラ イン の 線 種 を 実線 に し ます 。 


・double 9 
アウ トラ イン の 線 種 を 二 重 線 に し ます 。 


・dotted 
アウ トラ イン の 線 種 を 点線 に し ます 。 
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outline-style に 指定 で きる 値 (続き ) 


・dashed 
アウ トラ イン の 線 種 を 破線 に し ます 。 


・9PrOOVe 
アウ トラ イン の 線 自 体 が 溝 に な っ て いる よう な ボー ダー に し ます 。 


・ridge 
アウ トラ イン の 線 自体 が 盛り 上 が っ て いる よう な ボー ダー に し ます 。 


・1nset 
アウ トラ イン の 内 側 の 領域 全体 が 低く 見 える よう な ボー ダー に し ます 。 


・outset 
アウ トラ イン の 内 側 の 領域 全体 が 高く 見 える よう な ボー ダー に し ます 。 
outline-width に 指定 で きる 値 


・ 単 位 つ き の 実 数 
アウ トラ イン の 太 さ を 単位 つき の 実数 (5px な ど ) で 指定 し ます 。 


・thin, medium, thick 


「 細 い 」「 中 くら い ]「 太 い 」 と いう 意味 の キー ワー ド で 指定 で きま す ( 実 際 に 表示 され る 太 さ は ブ 


ラウ ザ に よっ て 異な り ま す )。 


outline-color に 指定 で きる 値 
・ 色 
色 の 書式 に 従っ て 任意 の アウ トラ イン の 色 を 指定 し ます 。 


・1nvert 
反転 させ た 色 に し ます 。 


outline に 指定 で きる 値 


・out]ine-style の 値 
outline-style に 指定 で きる 値 が 指定 で きま す 。 


・out1fne-width の 値 
out1ine-width に 指定 で きる 値 が 指定 で きま す 。 


・out]line-color の 値 
outline-color に 指定 で きる 値 が 指定 で きま す 。 
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HTML sample/chapter-09/lecture-9-2/03.html 





01 <p> 」 
2 < く textarea rows="7" cols="40"> 
リ 3 く /textarea> 
4 < く /P> 





CSS sample/chapter-09/lecture-9-2/03-outline.css 





01 textarea { 

02 border: 1px solid #666: 

03 } 

04 textarea:focus { 

05 out1ine: 3px sol1id #6cfz 

06 box-shadow: 0 0 15px 5px #6cf: 
07 } 























outline プロ パテ ィ の 使用 例 








上 の ソー スコ ー ド を 表示 させ た と ころ ( 何 も 操作 し て いな い 状 テキ スト 入力 欄 の 内 部 を クリ ッ ク す る と 水色 の アウ トラ イン 
態 ) (と 水色 の 影 ) が 表示 され る 

















テー ブル 関連 の 要素 


さて 、 こ こ か ら は テー ブル ( 表 ) の マー クア ッ プ の 仕方 に つい て 説明 し て いき ます 。 





テー ブル を 構成 する 要素 











テー ブル の 構造 は 、HTML の 中 で は も っ と も 複雑 で す 。 と は いえ 、 基 本 的 な 構造 で いえ ば 、 リ スト 
の 構造 に さら に も う 一 種類 の 要素 が 加わ っ て いる 程度 の も の で す 。 ま ず は シン プル な 基本 構造 か 
ら 順に 覚え て いき まし ょ う 。 


テー ブル を 作成 する に は 、 ま ず そ の 全体 を table 要 素 の タグ で 囲い ます 。 そ の 中 に は テー ブル の セ 
ル が 入る の で す が 、 そ の 内 容 が 縦列 また は 横 列 の 見 出し で ある セル は th 要素 (table header cell) 
と し て マー クア ッ プ し 、 そ の 内 容 が デー タ で ある セル は td 要素 (table data cel) と し て マー クア ッ 
プ し ます 。 そし て 、 各 セル は 横 一 列 ご と に 要素 (table row ツ ) で グル ー プ 化し ます 。 こ れ が HTML 
の テー ブル の 基本 構造 で す 。 





[/ table 要 素 ( 表 全 体 


また は また は tr 要素 ( 横 一 列 分 を グル ー プ 化 ) 
td 要素 td 要素 1d 要素 





また は こ tr 要素 ( 横 一 列 分 を グル ー プ 化 ) 
td 要素 


th 要素 || th 要素 || th 要素 
また は また は また は 
td 要素 td 要素 td 要素 


tr 要素 ( 横 一 列 分 を グル ー プ 化 ) 














HTML の テー ブル の 基本 構造 
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と table 要素 


table 要素 に は 、 次 の 値 が 指定 で きま す 。border 属 性 を 指定 し な けれ ば 、 一 般 的 な ブラ ウザ で は テ 
ー ブ ル の ボー ダー は 表示 され ませ ん (も ちろ ん CSS を 指定 すれ ば 表示 され ます )。 


table 要素 に 指定 で きる 属性 


・border=" ボー ダー の 表示 " 
この 属性 は HTML5 より も 前 の 仕様 で は 、 テ ー ブ ル 全体 を 囲う 枠 線 の 太 さ を ピク セル 数 で 指定 す 
る た め の 属 性 で し た 。 そ の た め 、 多 く の ブ ラウ ザ は 現在 で も この 指定 を 枠 線 の 太 さ と し て 認識 
し ます (0 より 大 きい 値 を 指定 する と 外 枠 だ け で な く セ ル を 区 切る 枠 も 表示 され ます )。 し か し 
HTML5 で は 、 こ の 属性 は テー ブル を レイ アウ ト の た め に 使用 し て いな いこ と を 明示 的 に 示す 目 
的 で 使用 され ます 。 その 場合 、 値 に は 1 を 入れ る か 、 値 を 空 に し た 状態 で 指定 し て くだ さい 。 


次 の サン プル は 、 テ ー ブ ル の 基本 構造 を 具体 的 に マー クア ッ プ し た 例 で す 。 


HTML sample/chapter-09/lecture-9-3/01.html 


01 <table border="1"> 

02 <tr><th> セル 1</th><th> セル 2</th> く th> セル 3</th> く /tr> 
03 <tr><td> セル 4</td> く td> セル 5 く </td>< く td> セル 6</td> く </tr> 
04 <tr><td> セ ル 7</td> く td> セル 8 く </td> く td> セル 9 く </td> く /tr> 
05 </table> 





テー ブル の 基本 構造 の マー クア ッ プ 例 
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上 の ソー スコ ー ド を 表示 させ た と ころ 


ぁ ゆ th 要素 と td 要素 
実は table 要素 だ け で な く 、th 要 素 と td 要素 に も 専用 の 属性 が 用 意 さ れ て いま す 。 指定 で きる 属性 


は ほぼ 共 通し て いる の で す が 、 こ こ で は セル を 連結 させ る colspan 属 性 と rowspan 属 性 に 注目 し 
て くだ さい (この あと に 具体 例 の サン プル が あり ます )。 
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th 要素 に 指定 で きる 属性 


・colspan=" 連 結 さ せる セル の 数 " 
この 属性 を 指定 し た セル か ら 右 方 向 に いく つ 分 の セル を 連結 する の か を 、1 以上 の 整数 で 指定 し 
ます 。 


・rowspan=" 連結 させ る セル の 数 " 
この 属性 を 指定 し た セル か ら 下 方 向 に いく つ 分 の セル を 連結 する の か を 、1 以上 の 整数 で 指定 し 
ます 。 


・headers=" この セル の 見 出し セル の id" 
この セル の 見 出し と な っ て いる セル が 音声 ブラ ウザ な ど で も 明確 に 分 か る よう に する 目的 で 、 
見 出し と な っ て いる セル に 指定 され て いる id 属性 の 値 を 指定 し ます 。 id 属性 の 値 は 半角 スペ ー 
ス で 区 切っ て 複数 指定 する こと が で きま す 。 


・Sscope=" この 見 出し セル の 対象 " 
この 見 出し セル の 対象 と な っ て いる セル の 範囲 を 示す キー ワー ド を 指定 し ます 。 指定 で きる キ 
ー ワ ー ド は 以下 の 通り で す 。 


キー ワー ド | 見 出し の 対象 と な る セル の 範囲 


row この 見 出し セル の 右 に ある セル 全部 

co1 この 見 出し セル の 下 に ある セル 全部 

この 見 出し セル の 右 以 降 に ある 同じ 横 列 グ ルー プ 
(thead 要素 ・tbody 要素 ・tfoot 要 素 ) の セル 

この 見 出し セル の 下 以 降 に ある 同じ 縦列 グル ー プ 
(colgroup 要素 ) の セル 


TOwgFrOUD 


colgroup 


td 要素 に 指定 で きる 属性 


・co] span=" 連結 させ る セル の 数 " 
この 属性 を 指定 し た セル か ら 右 方 向 に いく つ 分 の セル を 連結 する の か を 、1 以上 の 整数 で 指定 し 
ます 。 


・rowspan=" 連結 させ る セル の 数 " 
この 属性 を 指定 し た セル か ら 下 方 向 に いく つ 分 の セル を 連結 する の か を 、1 以上 の 整数 で 指定 し 
ます 。 


・headers=" この セル の 見 出し セル の id" 
この セル の 見 出し と な っ て いる セル が 音声 ブラ ウザ な ど で も 明確 に 分 か る よう に する 目的 で 、 
見 出し と な っ て いる セル に 指定 され て いる id 属性 の 値 を 指定 し ます 。 id 属性 の 値 は 半角 スペ ー 
ス で 区 切っ て 複数 指定 する こと が で きま す 。 
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ぁ ゆ > セル を 連結 させ る 


colspan 属 性 は 、 そ の セル か ら 右 側 に 向かっ て 、 指 定 し た 数 の セル を 連結 し ます 。 同様 に 、 
rowspan 属 性 は 、 そ の セル か ら 下 側 に 向かっ て 、 指 定 し た 数 の セル を 連結 し ます 。 こ れ に 関し て 


は 文章 で 説明 し て も 分 か り に くい の で 、 具 体 的 な サン プル の ソー スコ ー ド で 確認 し て み ま し ょ う 。 


実際 に は 「 連 結 す る ] と いう より も 、colspan 属性 また は rowspan 属 性 を 指定 し た セル が 、 指 定 


され た 分 だ け 拡 張 さ れ て 大 きく な る と 言っ た 方 が 正しい か も し れ ま せん 。 なぜなら 、 セ ル が 拡張 さ 


れる こと に よっ て 表示 され る 場所 が な く な っ た セル の タグ は 、 ソ ー ス コー ド か ら 取 り 除 く 必 要 が あ 
る か ら で す 。 た と えば 以下 の HTML の ソー スコ ー ド に お いて 、 上 の テー ブル で は セル 2 と セル 3 の 
要素 が 取り 除 か れ て いま す 。 同様 に 、 下 の テー ブル で は セル 6 と セル 9 の 要素 が 取り 除 か れ て いま 


す 。 


HTML sample/chapter-09/lecture-9-3/02.html 


01 
02 
03 
04 
05 
05 
07 
08 
09 
10 
11 


<table border="1"> 

く tr><th co]lspan="3"> セ ル 1 く </th> く /tr> 

く tr><td> セル 4 く /td> く td> セル 5 く /td> く td> セル 6 く </td> く /tr> 
く tr><td> セル 7 く </td> く td> セル 8 く /td> く td> セル 9 く </td> く /tr> 
く /table> 


く <table border="1"> 

く tr><th> セル 1</th><th> セル 2</thx> く th rowspan="3"> セル 3</th> く /tT> 
く tr><td> セル 4 く </td> く td> セル 5 く /td> く /tr> 

<tr><td> セル 7</td><td> セル 8 く </td> く </tT> 

く /table> 


colspan 属 性 と rowspan 属性 を 使用 し た マー クア ッ プ 例 


⑤) サン ブル 















































上 の サン プル の 表示 結果 
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ぁみ: テー ブル に キャ プシ ョ ン を つけ る 


テー ブル に は 、 キ ャ プシ ョ ン ( タ イト ル ) を つけ る こと が で きま す 。 キャプ ショ ン は caption 要素 と 
し て マー クア ッ プ し 、<table> 一 </tab1le> の 範囲 内 の 先頭 に 入れ ます 。 


と セル を 横 に グル ー プ 化す る 


また 、tr 要 素 は テー ブル 内 の ヘッ ダー ボディ フッ ター の いずれ か と し て グル ー プ 化す る こと が 
で きま す 。 そ の 際 に 使用 する の が 、thead 要素 (table header) ・tbody 要素 (table body) ・tfoot 
要素 (table footer) で す 。 こ れ ら の 要素 を 使用 する 場合 、 そ の 順序 は 基本 的 に は thead 要素 ・tfoot 
要素 ・tbody 要 素 の よう に 、tbody 要素 より も tfoot 要 素 を 先 に する 必要 が ある 点 に 注意 し て くだ 
さい 。 こ れ は 、 か な り 長 いか も し れ な い tbody 要素 よ り も 先 に tfoot 要 素 を 読み 込ん で 表示 で きる 
よう に する 目的 で 、HTML4 で 決め られ た 仕様 で す 。 た だ し 、HTML5 の 仕様 で は thead 要 素 ・ 
tbody 要素 ・tfoot 要素 の 順に 配置 する こと も 認め られ て いま す 。 





HTML sample/chapter-09/lecture-9-2/03.html 


り | <table border="1"> 
| 02 <caption> キ ャ プシ ョ ン </caption> 


03 <thead> 
04 <tr>< く th> セル 01</th><th> セル 02</th> く th> セル 03 く </th> く </tr> | 
05 </thead> 
06 <tfoot> 
7 <tr><td> セル 16 く </td> く td> セル 17 く /td> く td> セル 18 く </td> く </tr> | 
08 </tfoot> 


10 <tbody jid="tb1"> 

<tr><td> セル 04 く </td><td> セル 05 く </td> く td> セル 06</td></tr> 
12 <tr> く td> セル 07 く </td> く <td> セル 08 く /td> く td> セル 09 く </td> く </tr> 
13 </tbody> 

14 <tbody 1d="tb2"> 

15 <tr><td> セル 10</td> く td> セル 11</td> く td> セル 12 く </td> く /tr> 
jp < く tr><td> セル 13 く /td> く td> セル 14 く /td> く td> セル 15</td> く </tr> 
17 </tbody> 


18 </tab1e> 


CSS Sample 
01 thead th, tfoot td { 
02 Color: #fff: 
| 903 background: #bbb: /* グレ ー */ 
| 04 } 
| 05 tbody#tb1 td { 
06 color: #f 和 ff: 
07 background: #fc0: /* 黄色 */ 
08 } 
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09 tbody#tb2 td { 
| 10 color: #fff: | 
11 background: #390: /* 緑 */ 
42 








caption 要素 お よび thead 要 素 ・tbody 要素 ・tfoot 要 素 を 使用 し た 例 














上 の サン プル の 表示 結果 











テー ブル 関連 の プロ パテ ィ 


続い て テー ブル に 関連 する CSS プロ パテ ィ に つい て 説明 し て いき ます 。 





隣接 する ボー ダー を 1 本 の 線 に する 











テー ブル の 初期 状態 で は 、table 要素 の ボー ダー と th 要素 また は td 要素 の ボー ダー が それ ぞ れ 独立 
プレ た ボー ダー と し て 個別 に 表示 され る よう に な っ て いま す 。border-collapse プロ パテ ィ を 使用 す 
る と 、 そ れ ぞ れ の 隣接 する ボー ダー を まとめ て 1 本 の 線 に し て 表示 させ る こと が で きま す 。 


border-collapse に 指定 で きる 値 


・collapse 
テー ブル 内 の 隣接 する ボー ダー は すべ て まとめ て 1 本 に し て 表示 させ ます 。 


・Separate 
テー ブル 全体 の ボー ダー と 各 セ ル の ボー ダー を それ ぞ れ 独立 し た も の と し て 別々 に 表示 させ ま 


す 。 





HTML sample/chapter-09/lecture-9-4/01.html 


01 <table border="1" 1d="sample1"> 

2 <caption>col1lapse</caption> 

く tr> く th> セル 1 く </th> く th> セル 2</th> く th> セル 3 く /th> く </tr> 
く tr>< く td> セル 4 く </td> く td> セル 5 く /td> く td> セル 6 く </td> く /tr> 
<tr><td> セル 7 く </td> く td> セル 8 く </td> く td> セル 9 く </td> く /tr> 
く /table> 


8 <table border="1" 1d="sample2"> 

j ロ < く caption>separate</caption> 

」 <tr><th> セル 1 く </th><th> セル 2</th> く th> セル 3 く /th> く /t> 
<tr>< く td> セル 4 く /td> く td> セル 5 く /td> く td> セル 6 く /td> く /tr> 

1 3 <tr><td> セル 7 く </td> く td> セル 8 く /td> く td> セル 9 く /td> く /tr> 

14 </table> 








242 AP 了 TE を ③ フォ ー ム と テー ブル 








CSS sample/chapter-09/lecture-9-4/01-border-collapse.cSSs 





| table { 
02 float: 1eft: 


03 border: 5px solid #999: 
| 904 } 
05 th, td { 


06 padding: 0.2em: | 
07 border: 3Dpx so]l1id #ccc: | 
08 } 
| 09 table#samplel { 
| 10 border-collapse: collapse: 
| 11 } 

12 table#sample2 { 
1 49 border-collapse: separate: 

14 margin-left: 8Dpx: | 
1 15 } 

















border-collapse プロ パテ ィ の 使用 例 








collapse Separate 
セル 1 セル 2 セル 3|| セル 1 セル 2 セル 3 
セル 4 セル 5 セル 6| | セル 4 セル 5 セル 6 
| セル 7 セル 8 セル 9 







セル 7 セル 8 セル 9 











上 の ソー スコ ー ド の 表示 結果 











テー ブル の キャ プシ ョ ン 位 置 を 下 に する 








caption-side プロ パテ ィ を 使用 する と 、 通 常 は テー ブル の 上 に 表示 され る キャ プシ ョ ン を 、 テ ー 
ブル の 下 に 表示 させ る こと が で きま す 。 


caption-side に 指定 で きる 値 


・top 
キャ プシ ョ ン を テー ブル の 上 に 表示 させ ます 。 








caption-side に 指定 で きる 値 (続き ) 


・bottom 
キャ プシ ョ ン を テー ブル の 下 に 表示 させ ます 。 





HTML sample/chapter-09/lecture-9-4/02.html 





01 
02 
03 
04 
05 
06 


く table border="1"> 

<caption> キ ャ プシ ョ ン </caption> 

<tr><th> セル 1</th> く th> セル 2</th> く th> セル 3</th> く /tT> 
く tr>< く td> セル 4 く </td> く td> セル 5 く /td> く td> セル 6 く </td> く /tr> 
<tr>< く td> セル 7</td> く td> セル 8 く /td> く td> セル 9 く /td> く /tr> 
く /table> 





CSS 


sample/chapter-09/lecture-9-4/02-caption-Side.CSS 





01 
02 
03 





caption { 
caption-side: bottom: 
] 











caption-side プロ パテ ィ の 使用 例 














上 の ソー スコ ー ド の 表示 結果 
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_ その 他 の 要素 


こ で は 、Chapter 9 まで 








こ は 登場 し な か っ た けれ ど 、 覚え て お く べき 要素 に つい て 説明 し て _ 


OF それ ぞ れ 役目 が 異な り ます が 、 使用 鎖 度 は 高い の で 、 頭 に 入れ て お きま し ょ う 。 








区 切 り 線 ] HTML5 改 | 








hr 要素 の 「hr] は 「horizontal rule ( 横 肢 線 )」 の 略 で 、 
空 要 素 で し た 。 し か し HTML5 か ら は その 役割 が 変更 され 、 線 を 表示 させ る こと が 目 
く 、 そ の 部 分 で 話題 (また は 物語 の 場面 な ど ) が 変わ っ て いる こと を 示す こと が 目的 の 要素 と な り ま 


も と も と は 単純 に 横線 を 表示 させ る だ け の 
的 な の で は な 


し た 。 と は いっ て も 、 セ クシ ョ ン レ ベル で の 大 き な 主 題 の 変わ り 目 で 使用 する の で は な く 、 段 落 レ 


ベル で の 小さ な 変わ り 目 に 使用 する こと が 想定 され て いま す 。 こ の よう に 役割 は 変更 され まし た が 、 


現在 で も 一 般 的 な ブラ ウザ に お いて は 横線 と し て 表示 され る こと に 変わ り は あり ませ ん 。 


HTML sample/chapter-10/lecture-10-1/01.html 





01 
02 


07 





く P> 
僕 は hr 要素 の 「 エ イチ ・ ア ー ル ] は 何 の 略 な の か 先輩 に 聞い て みた 。「 へ ヘアライン] だ と 先輩 は 言っ た 。 そ 
れ な ら 「 エ イチ ・ エ ル ] に な ら な いで すか 、 と 僕 は 聞き 返し た 。 先 輩 は 無 表 情 で 僕 の 顔 を 三 秒 ほ ど 見 つめ て か ら 、 


そん な こと 気 に し て な いで 自分 の へ アラ イン が 後退 し な いよ うに 気楽 に 生き た 方 が いい ぞ 、 と 言っ た 。 そ の 語 


は それ で 終わ っ た 。 
< く /P> 
く hr> 
く P> 

翌日 の 午後 、 今 度 は u] 要素 の 「 ユ ー・ エ ル 」| が 何 の 略 で ある の か 尋ね て みた 。 先輩 は パソ コン の 画面 を 見 
つめ た まま で 「 ウ ル サ イ ] の だ 、 と 言っ た 。 そ し て 「 そ ん な こと ぐら い 自分 で 調べ る も ん だ ぞ 。 ほ ら 、 そ こ 
に 「 よ くわ か る HTML5/CSS3 の 教科 書 ] が ある だ ろう 。 そ の 本 に は ちゃ ん と 書い て ある か ら 、 し っ か り 読 ん 
だ 方 が いい ぞ ] と 続け た 。 サ ンプ ル で 宣伝 か ? 
く /p> 





hr 要素 の 使用 例 。 こ の 例 で は 、 場 面 が 変わ る 部 分 で 使用 し て いる 
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1 











僕 は hr 要素 の 「 エ イチ ・ ア ー ル 」 は 何 の 略 な の か 先輩 に 聞い 
て みた 。「 へ アラ イン 」 だ と 先輩 は 言っ た 。 そ れ な ら 「 エ イ 
チ ・ エ ル 」 に な ら な いで すか 、 と 僕 は 聞き 返し た 。 先輩 は 無 表 
情 で 僕 の 顔 を 三 秒 ほ ど 見 つめ て か ら 、 そ ん な こと 気 に し て な い 
で 自分 の ヘア ライ ン が 後退 し な いよ うに 気楽 に 生き た 方 が いい 
ぞ 、 と 言っ た 。 そ の 話 は それ で 終わ っ た 。 





翌日 の 午後 、 今 度 は ul 要素 の 「 ユ ー・ エ ル 」 が 何 の 略 で ある 
の か 尋ね て みた 。 先輩 は パソ コン の 画面 を 見 つめ た まま で 「 ウ 
ル サ イ 」 の 略 だ 、 と 言っ た 。 そ し て 「 そ ん な こと ぐら い 自 分 で 
調べ る も ん だ ぞ 。 ほ ら 、 そ こ に 『 よ くわ か る HTML5/CSS3 の 
教科 書 」 が ある だ ろう 。 そ の 本 に は ちゃ ん と 書い て ある か ら 、 
し っ か り 読 ん だ 方 が いい ぞ 」 と 続け た 。 サ ンプ ブル で 宣伝 か ? 











前 ペー ジ の ソー スコ ー ド を 表示 させ た と ころ 








追加 と 削除 








ins 要素 は あと か ら 追 加 さ れ た 部 分 (inserted text) 、del 要素 は あと か ら 削 除 さ れ た 部 分 (deleted 
text) を あら わす 要素 で す 。 一般 的 な ブラ ウザ で は 、ins 要 素 は 下線 付き の 状態 で 、del 要 素 は 取消 
線 が 引か れ た 状態 で 表示 され ます が 、 表 示方 法 に つい て は CSS で 自由 に 変更 で きま す 。 こ れ ら の 
要素 は 、 イ ン ラ イン の 範囲 に で も ブロ ッ ク レ ベル の 範囲 に で も マー クア ッ プ で きま す 。 次 の 属性 が 
指定 で きま す 。 


ins 要素 ・del 要 素 に 指定 で きる 属性 
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HTML sample/chapter-10/lecture-10-1/02.html 





01 <h1>To Do リス ト </h1> 


03 < く ul> 

04 <11> 「 よ くわ か る PHP の 教科 書 ] を 購入 </11> 

05 <]1><de] datetime="2012-06-18T02:50:00+09:00">「 よ くわ か る HTML5/CSS3 の 教科 書 ] の 原稿 
執筆 </de1> く </11> 

06 <11><jins datetime="2012-07-16T10:30:00+09:00">「CSS3 妖 怪 図鑑 】 の 原稿 執筆 く </1ns> く /11> 

7 く /u1> 





ins 要 素 と del 要 素 の 使用 例 


(① サン フル 








To Do リス ト 


・ 「『 よ くわ か る PHP の 教科 書 」 を 購入 


・ _「CSS3 妖 怪 図鑑 」 の 原生 執 筆 








上 の ソー スコ ー ド を 表示 させ た と ころ 








スク リプ ト 








script 要 素 は 、HTML に スク リプ ト を 組み 込む た め の 要 素 で す 。CSS の 場合 は 、 要 素 内 容 と し て 
CSS を 書き 込む な ら style 要 素 、CSS の ファ イル を 読み 込む な ら Iink 要 素 と 使い 分 けが 必要 で し た 
が 、script 要 素 の 場合 は これ だ け で 要素 内 容 と し て スク リプ ト を 書き 込む こと も 外部 の ファ イル を 
読み 込む こと も 可能 で す 。 次 の 属性 が 指定 で きま す 。 


た だ し 、 要 素 内 容 と し て スク リプ ト を 書き 込む こと が で きる の は 、src 属 性 を 指定 し て いな いり 場合 
に 限ら れ ま す 。src 属 性 を 指定 し た 場合 は 、 要 素 内 容 は 空 に し て お か な けれ ば な り ま せん (コメ ント 
に よる 注意 書き な ど は 入れ られ ます )。 

script 要素 に 指定 で きる 属性 


・src=" ファ イル の URL" 
スク リプ ト を 記述 し た ファ イル の URL を 指定 し ます 。 
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script 要 素 に 指定 で きる 属性 (続き ) 


・type="MIME タ イプ " 
スク リプ ト 言 語 の MIME タ イプ を 指定 で きま す 。script 要 素 は も と も と JavaScript 専 用 で 
は な く 、JavaScript 以 外 の スク リプ ト 言 語 に も 対応 で きる よう に な っ て いる た め 、 こ の 属性 
が 用 意 さ れ て いま す 。 こ の 属性 を 指定 し な か っ た 場合 は 「text/javascript」 が 指定 され た 
状態 と な り ま す 。 ョ 


・charset=" 文字 コー ド " 
src 属 性 で 指定 し て いる ファ イル の 文字 コー ド を 示し ます 。 


HTML 





01 <scr1pt src="js/example.JS"> く /script> 
02 
03 <script> 

| 04 ご スク リプ トー 


| 05 </scr1pt> 





スク リプ ト は 、 こ の いずれ か の パタ ー ン で 記述 する 


と > スク リプ ト が 動作 し な い 環 境 向け に は 


スク リプ ト は すべ て の ユー ザー の 環境 で 動作 する わけ で は あり ませ ん 。 意 図 的 に スク リプ ト が 動作 
し な いよ うに 設定 し て いる 人 も いま すし 、 そ も そ も ス クリ プ ト が 動作 し な い ( 一 般 的 で は な い ) ブラ 
ウザ を 使用 し て いる 人 も いま す 。 そ の よう な スク リプ ト が 動作 し な い 環 境 向 け の 内 容 を 別途 用 意 し 
て お きた い 場 合 に は 、noscript 要 素 を 使用 し ます 。 こ の 要素 の 要素 内 容 は 、 ス クリ プ ト が 動作 す 
る 環境 で は 無視 され ます が 、 動 作 し な い 環境 に お いて は 有効 と な り ま す 。 


noscript 要 素 は 、body 要素 内 で 使用 で きる だ け で な く 、head 要 素 内 で 使用 する こと も 可能 で す 。 
その 場合 は 内 容 と し て link 要素 ・style 要素 ・meta 要素 が 入れ られ ます 。 








オン ライ ン フ レー ム 


iframe 要素 を 使用 する と 、Web ペ ー ジ の 中 に 別 の Web ペ ー ジ を イン ライ ン の 状態 で 表示 させ る こ 
と が で きま す (iframe は inline frame の 略 で す )。 要 素 内容 は 、 イ ン ラ イン フレ ー ム が 表示 で き な い 
と き に 限り 表示 され ます 。 こ の 要素 は 、YouTube の 動画 や ー 部 の 広告 な ど を Web ペ ー ジ に 組み 込 
む 際 に 利用 され て いま す 。 
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iframe 要素 に 指定 で きる 属性 








HTML(03.html) sample/chapter-10/lecture-10-1/03.html 


し 


く body> 


< く 1fFame src="03-2.htm1" width="250" height="150"> 
< く /1 和 frame> 


</body> 
</htm1> 





HTML(03-2.html) sample/chapter-10/lecture-10-1/03-2.html 


CC 


く body style="background: steelblue"> 


く PD> 

これ は 「03-2.html」 の 内 容 で す 。 こ の ペー ジ は 、body 要素 に sty1e 属 性 を 指定 し て 、 背 景 を 
青く し て いま す 。 

く /Pp> 


く /body> 
</html> 














上 の 「03.html| を 表示 させ た 
と ころ 。 イ ン ラ イン フレ ー ム の 
| 内 容 と し て 「03-2.html| が 表 
示さ れ て いる 
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その 他 の プロ パテ ィ 


続い て 、Chapter 9 まで に 登場 し な か っ た プロ パテ ィ に つい て 説明 し て いき ます 。 コ ン テ ン ツ 
を 追加 する content プ ロ パ ティ と 、 引 用 符 を 追加 する quotes プロ パテ ィ に つい て で す 。 


コン テン ツ の 追加 


content プロ パテ ィ を 使用 する と 、HTML 内 に は 存在 し て いな い コ ン テ ン ツ を CSS で 追加 する こ 
と が で きま す 。 コ ン テ ン ツ は 、 セ レク タ の ::before 疑 似 要素 また は ::after 疑 似 要素 を 使用 し て 、 
指定 し た 要素 内 の 内 容 全体 の 直前 また は 直後 に 挿入 され ます 。 追 加 す る コン テン ツ は 、display プ 
ロ パ ティ を 使用 し て イン ライ ン に で も ブロ ッ ク レ ベル に で も で きま す 。 次 の 値 が 指定 で きま す 。 


content に 指定 で きる 値 


・ テ キス ト 
コン テン ツ と し て 追加 する テキ スト を 二 重 引用 待 (") また は 一 重 引用 符 (") で 囲っ て 指定 し ま 
す 。 


・ur1( デー タ の アド レス ) 
コン テン ツ と し て 追加 する デー タ (画像 な ど ) の アド レス を 指定 し ます 。 


・attr( 属性 名 ) 
この プロ パテ ィ が 指定 され た 要素 に 、 属 性 名 で 指定 し た 属性 が 指定 され て いる 場合 、 そ の 値 を 
テキ スト と し て 追加 し ます 。 


・open-quote, close-quote 
次 に 解説 する quotes プロ パテ ィ で 設定 され て いる 引用 符 を 追加 し ます 。 





・none 
コン テン ツ を 追加 し ませ ん 。 








の で 2. 








HTML sample/chapter-10/lecture-10-2/01.html 
1 <h1>CSS で 内 容 を 追加 する 方 法 く </h1> 





CSS sample/chapter-10/lecture-10-2/01-content.css 


01 h1 { 

02 font-s1ize: large: 

03 } 

04 h1::before { 

05 content: "特別 コラ ム :": 
06 display: block: 

07 。 font-s1ze: small: 

08 color: #f6d: 

09 } 

10 hl1::after { 

11 content: url(sakura.JD9): 
12 display: block: 

4 き } 


























content プロ パテ ィ の 使用 例 








特別 コラ ム : 
CSS で 内 容 を 追加 する 


記 








上 の ソー スコ ー ド を 表示 させ た と ころ 








引用 待 の 設定 





quotes プロ パテ ィ は 、content プ ロ パ ティ で 追加 する 引用 符 (open-quote、close-quote) を 指定 
する プロ パテ ィ で す 。 引 用 部 分 の 前 に つけ る 記号 と 後に つけ る 記号 を 半角 スペ ー ス で 区 切っ て ペ 
ア で 指定 し ます 。 さ ら に 半角 スペ ー ス で 区 切っ て 記号 の ペア を 指定 する こと で 、 引 用 が 入れ 子 に な 
っ た 場合 に 使用 する 記号 を いく つ で も 指定 で きま す ( 入 れ 子 の 深 さ に 応じ て 、 次 々 に 右側 の ペア の 
記号 が 採用 され ます )。 


CuAPTEF IO その 他 の 機能 と テク ニッ ク 





93000H 


quotes に 指定 で きる 値 











HTML sample/chapter-10/lecture-10-2/02.html 


01 <p> 

02 知り 合い の ライ ター さん に 確認 し て みた と ころ 、<q> よく ある 実用 書 的 な 本 に は <q> 日 本 語 の 引用 
符 に は カギ カッ コ を 用 いる </q> と 書か れ て いる </q> と の こと だ っ た 。 

03 </P> 





CSS sample/chapter-10/lecture-10-2/02-quotes.css 


1 qibefore { content: open-quote: } 
02 qiafter { content: close-quote: } 
03 q { quotes: " 語 TRIR AS 














quotes プロ パテ ィ の 使用 例 


知り 合い の ライ ター さん に 確認 し て みた と 
ころ 、 「 よ く あ る 実用 書 的 な 本 に は 『 日 本 
語 の 引用 符 に は カギ カッ コ を 用 いる 』 と 書 
か れ て いる 」 と の こと だ っ た 。 





上 の ソー スコ ー ド を 表示 させ た と ころ 


2 て る 








clearfix に つい て 


続い て clearfx に つい て 説明 し ます 。 clearfix は 、 フ ロー ト の 不都合 を 解消 する た め に 生ま れ 


た テク ニッ ク で す 。 時 代 と と も に その 形 は 変化 し て き て 、 いく つか の 対処 方 法 が あり ます 。 を 
の よう な 問題 に 対し て 、 どう いう 方 法 で 対処 し て いる の か 、 、 少 し や や こし い の で 、 ここ で し っ 
_ か り と 理解 し て お きま し ょ う 。 








フロ ー ト で 不都合 な こ 








ここ で は 、 フ ロー ト を クリ ア す る た め の 特 殊 な CSS の テク ニッ ク 「clearfix] に つい て 説明 し ます 。 
float プ ロ パ ティ や clear プロ パテ ィ は 、 も と も と 画像 な どの 横 に テキ スト を 回 り 込 ませ る 目的 で 用 
意 さ れ た も の で ある た め 、 そ れ を 段 組 み の よ うに ボッ クス を 横 に 並べ る 目的 で 使用 し て いる と 不 都 
合 が 生じ る こと が あり ます 。 次 の 例 を 見 て くだ さい 。 こ れ は Chapter 7 で 使っ た 2 段 組 み の サ ンプ 
ル を さら に 単純 に し た も の で す 。 





HTML 


sample/chapter-10/lecture-10-3/01.html 





01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 





<div id="contents"> 


<div id="main"> 

メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
メイ ン の 段 の テキ スト で す 。 
く /div> 


<div 1d="sub"> 

サブ の 段 の テキ スト で す 。 
サブ の 段 の テキ スト で す 。 
サブ の 段 の テキ スト で す 。 
く /div> 


く /div> 























2 て 和 オ CaAPTEF IO その 他 の 機能 と テク ニッ ク 











CSS sample/chapter-10/lecture-10-3/01-2cols.css 


01 #contents { 

02 margin: 0 autoi 
03 width: 300px: 
04 } 

05 

06 #main { | 
07 float: right: 

08 width: 200px: 

9 color: 者 ff: 

j background: #fc0: /* 黄色 */ 
11 } 

12 

13 #sub { 

14 float: left: 

15 width: 100px: 

16 color:i #fff: 

17 background: #390: /* 緑 */ 
































で は 、#contents に 赤い ボー ダー を 表示 させ て 、 全 体 を 囲っ て み ま し ょ う 。CSS の #contents 
に 対す る 指定 の と ころ に 、 次 の よう に ボー ダー を 表示 させ る 指定 を 追加 し て くだ さい 。 


CSS 








| #contents { 

02 margin: 0 auto: 

03 width: 300Ppx: 

04 border: 10px solid red: キーーー 追加 
05 1 





全体 を 囲う #contents に 赤い ボー ダー を 表示 させ る 


2 て 











ソー スコ ー ド を 保存 し て ブラ ウザ で 最 表示 さ 
せる と 、 ボ ー ダ ー は こん な 風 に 表示 され て し 
まい まし た 。 な ぜ 、 赤 い ボ ー ダ ー は 全体 を 囲 
う よ う に 表示 され な い の で し ょ うか ? 











#contents に 赤い ボー ダー を 表示 させ た と ころ 


と float を 指定 し た 要素 は 親 要 素 か ら は み 出 す 


実は 、f1oat を 指定 し た 要素 の ボッ クス は 、 それ を 含む お 要素 の ボッ クス の 高 さと は 無関係 に な っ て 、 
そこ か ら は み 出 す 仕 様 と な っ て いま す 。 つ まり 、 上 の サン プル で は 、#contents の 内 容 は 2 つと 
も f1oat が 指定 され て いる の で #contents か ら は み 出 し 、#contents の 高 さ は 0 に な っ て いる 
の で す 。 

これ は 、 画 像 の 横 に テキ スト を 回 り 込 ませ る と いう 本 来 の 機能 を 考え る と 理解 で きま す 。 

た と えば 、 下 の スク リー ン シ ョ ッ ト は 、2 つ の 段落 の うち 1 つめ の 段落 の 先頭 に 画像 を 入れ て 、 そ 
れ に 「f1oat: right:」 を 指定 し た も の で す 。 ボ ックス の 状態 が 分 か りや すい よう に 赤い ボー 
ダー と グレ ー の 背景 を 指定 し て いま す 。 


赤い ボー ダー を 指定 し た 2 つの 
(⑬ サン フル に 段落 が あり 、 先 頭 の 画像 は 右 に 


を っ. lo 本 3 に フロ ー ト し て いる 


1 つめ の 段落 の テキ ス 


彼 落 の テキ スト で す 。 


2 つめ の 段落 の テキ スト で す 。 2 つめ の 段落 の テ 
[キス ト で す 。 2 つめ の 段落 の テキ スト で す 。2 つ 
め の 段 落 の テキ スト で す 。 2 つめ の 段落 の テキ ス 
ト で す 。 
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で は 、 こ の ウィ ンド ウ を 横 に 広げ て 、2 つ め の 段 落 が 画像 の 横 に 回 り 込 む 様子 を 見 て み ま し ょ う 。 
画像 は 1 つめ の 段落 の ボッ クス を は み 出 し 、2 つ め の 段 落 に 入り 込ん で いま す 。 ボ ックス の 形状 は 
常に 四角 形 で ある た め 、 画 像 の 横 に 後続 の ボッ クス の テキ スト を 回 り 込ま せる に は 、 フ ロー ト し た 
画像 は この よう に ボッ クス か ら は み 出 る 必要 が ある の で す 。 








(① サン ブル 


1 つめ の 段落 の テキ スト で す 。 1 つめ の 段落 の テキ ス 
ト で す 。 1 つめ の 段落 の テキ スト で す 。 1 つめ の 段落 
の テキ スト で す 。 1 つめ の 段落 の テキ スト で す 。 


2 つめ の 段落 の テキ スト で す 。 2 つめ の 段落 の テキ ス 
ト で す 。 2 つめ の 段落 の テキ スト で す 。 2 つめ の 段落 
の テキ スト で す 。 2 つめ の 段落 の テキ スト で す 。 











ウィ ンド ウ の 幅 を 広げ る と 画像 は 1 つめ の 段落 を は み 出 し 、2 つ め の 段 落 に 入り 込む 


ぁ ぁ clear 要素 を 使用 し た 場合 の 不都合 


単純 に コン テン ツ を 2 段 組 み に す る だ け で あれ ば 、 こ の よう な 仕様 で も 特に 問題 は な いか も し れ ま 
せん 。 し か し 、 段 組み 部 分 を 囲う 親 ボ ックス に ボー ダー を 表示 させ た り 背 景 を 表示 させ た り し て 、 
その 中 に フロ ー ト させ た 要素 が すっ ぽ り と 収まる よう に し た い 場 合 に は 、 ち ょ っ と 手間 が か か り ま 
唱 。 


な に し ろ clear 要 素 は ブロ ッ ク レ ベル 要素 の 先頭 で フロ ー ト を 解除 する プロ パテ ィ で す 。2 つ め の 
段落 の 先頭 で フロ ー ト を クリ ア し た と ころ で 、2 つ め の 段 落 は 回 り 込 まな く は な り ま す が 、1 つ め 
の 段落 か ら フ ロー ト が は み 出 す 状 態 に 変化 は あり ませ ん 。1 つ め の 段 落 か ら フ ロー ト が は み 出 な い 
よう に する に は 、1 つ め の 段 落 内 の 最後 で フロ ー ト を クリ ア す る 必要 が あり ます 。 つ まり 、1 つ め 
の 段落 の 最後 に 、 フ ロー ト を クリ ア す る た め だ け に ブロ ッ ク レ ベル 要素 を 追加 する 必要 が ある の で 
す (clear プロ パテ ィ の 適用 対象 は ブロ ッ ク レ ベル 要素 の み で ある た め )。 と ころ が 、p 要 素 の 中 に 
は ブロ ッ ク レ ベル 要素 は 入れ られ な い 仕 様 に な っ て いま す 。 こ ん な と き は どう すれ ば いい の で し ょ 
うか が や 

















フロ ー ト の 不都合 を 解消 する (1) 








実は この 問題 を 解消 する シン プル で 簡単 な 方 法 が あり ます 。 そ れ は 、 フ ロー ト を 含む 親 要素 自体 も 
フロ ー ト させ て し まう か 、overflow プロ パテ ィ で 「visible」 以外 の 値 を 指定 する こと で す 。 こ うす 
る だ け で 、 フ ロー ト さ せ た 要 素 の 親 要素 は 、 フ ロー ト し た ボッ クス 全体 を 含む よう に 拡張 され る の 
3 あら 


し か し 、 親 要素 も フロ ー ト させ る と いう こと は 、 場 合 に よっ て は さら に それ を クリ ア す る 必要 が 出 
て きま す 。 つ まり 、 問 題 を 一 階層 外側 に 追い や っ た だ け の 状態 に な る 可能 性 が ある と いう こと で す 。 
で す の で 、 一 般 的 に は フロ ー ト を 使う 方 法 は あま り 利 用 され て いま せん 。 


と いう わけ で 、 最 近 で は overflow プロ パテ ィ に 「hidden] また は 「autol を 指定 し て 問題 を 解消 
する ケー ス が 多く な っ て いま す 。「 最 近 多く な っ て いる 」 と いう 言い 方 を し た の は 、 か つて は この 
問題 を 解消 する た め に overflow プロ パテ ィ は あま り 使 用 され て いな か っ た か ら で す 。 それ は 、 
overflow プロ パテ ィ を 使っ た 方 法 で は 、Nescape 6 や Opera6 7 と いっ た 一 部 の 古い ブラ ウザ に 
は 対応 で き な か っ た と いう 理由 に より ます 。 現在 で は 、 こ れ ら の ブラ ウザ の こと は ほとん ど 気 に す 
る 必要 も あり ませ ん の で 、「overf1ow: hidden:」 を 指定 すれ ば 問題 は 解消 で きま す 。 


CSS sample/chapter-07/lecture-7-5/02-2cols.css (HTML フ ァイル は 02.html) 





1 #contents { 

02 margin: 0 auto: 

03 width: 300pxi 

04 border: 10px solid red: 

05 overflow: hidden: さ ーーー 追加 
06 } 





先程 の サン プル に 「overflow: hidden:」 を 追加 し た 例 

















フロ ー ト の 不都合 を 解消 する (2) 








で は 当時 、Nescape 6 や Opera6 一 7 と いっ た 一 部 の 古い ブラ ウザ で も 問題 を 解消 させ る た め に 、 
どの よう な 方 法 が と られ て いた の で し ょ うか ? 実は 、content プ ロ パ ティ と display プロ パテ ィ 
を 使っ て 、 フ ロー ト を 含む 親 要素 の 最後 の 部 分 に ブロ ッ ク レ ベル 要素 を 生成 させ 、 そ こ に clear プ 
口 パ ティ を 指定 し て 解除 させ る と いう 手法 が と られ て いた の で す 。 し か も 、 単 純 に それ を お こ な う 
だ け で は うま く 対 応 で き な い ブラ ウザ も あっ た た め 、 様 々 な 部 分 で チュ ー ニ ング を お こない 、 ど の 
ブラ ウザ で も うま く 動 く よ う に な っ て いま し た 。 そ の CSS の 裏 技 的 ソー スコ ー ド が 、clearfix と 呼 
ば れ 長 いあ い だ 使 われ 続け て きた テク ニッ ク な の で す 。 


ぁ ゆ clearfix の 原型 


clearfix は 時 代 と と も に 変化 し て きま し た が 、 そ の 原型 は 次 の よう な も の で し た 。 





01 .clearfix:after { 

02 Contenti "。7i 

03 display: block: 

04 height: 0: 

05 clear: both: 

06 visibility: hidden: 


08 .clearfix { display: 1nline-b1ock: } 


10 /* Hides from IE-mac \*/ 

11 * htm] .clearfix { height: 1%: } 
12 .clearfix { display: block: } 
13 /* End hide from IE-mac */ 











clearfix の 原型 。 こ れ だ け で IE5 (Mac 版 も 含む ) や Nescape6、Opera6 な ど 、 当 時 の ほぼ すべ て の ブラ ウザ に 対応 し て いた 


使用 方 法 は 、 当 時 は フロ ー ト を 含む 親 要 素 に 「c1ass="c1earfix"」 を 直接 指定 し て 適用 させ 
る か 、clearfix の ソー スコ ー ド 内 の 「.clearfix| の 部 分 を 親 要素 に 既に 指定 され て いる クラ ス 
名 に 置き 換え て 使用 し て いま し た 。 








279 











pb 現在 の clearfix の コー ド 


clearfix の 原型 は あま り に も 長かっ た た め 、 時 代 と と も に サポ ー ト する 必要 の な く な っ た ブラ ウザ 
に 対す る 処理 も 削ら れ て いき 、 現 在 で は ほぼ 次 の よう な シン プル な 形 に な っ て いる よう で す ( 実 際 
に は さま ざま な バリ エー ショ ン が 生み 出さ れ て いま す )。 た だ し 、Internet Explorer 6 に も 対応 す 
る 必要 が ある 場合 に は 、「zoom: 1:] また は 「width: 100%:] な どの 指定 も 別途 追加 する 必 
要 が あり ます 。 


CSS 


01 .clearfix:after { 
02 contents "7s 


03 display: block: 
04 。 clear: bothi 
05 } 


シン プル に な っ た 現在 の clearfix の 例 。IE6 に も 対処 する 必要 が ある 場合 は 別途 指定 が 必要 





clearfix を 使用 する に は 、 い ちい ち ク ラス を つけ る 必要 が あっ た り 、 一 部 の HTML 編 集 ソ フト の デ 
ザイ ン ビ ュー で 指定 通り に 表示 され な いな どの 問題 も あっ て 、 現 在 で は あま り 使 われ な く な っ て き 
て いま す 。 と は いえ 、overflow を 使う 方 法 で は うま く 対 処 で き な い よう な 場合 \*? に は 、 現 在 で も 
clearfix は 利用 され る こと が ある よう で す 。 


※15 : た と えば 、 内 容 の 一 部 を フロ ー ト と は 別に あえ て は み 出 させ て いる よう な デザ イン の 場合 に は 、「overflow: hidden:] 
や 「overf1ow: auto:] が 使え な いこ と も あり ます 。 
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_ メデ ィ ア クエ リー 


「 メ ディ アク エリ ー ー」 を 使う と 、 出力 する 媒体 や 状態 ご と に 、 適用 する CSS を 変え る こと が で 





きま す 。 表 示 領 域 の 幅 な ど に 応じ て CSS を 変え る こと が で きる 便利 な 機能 で す 。 














メデ ィ ア クエ リー と は ? icssssi 








Chapter 4 で は CSS の 組み 込み 方 を 解説 し 、 そ の 中 で Iink 要 素 や style 要素 に は media 属性 が 指定 
で きる と いう 説明 も し まし た 。media 属性 に は 次 の 値 が 指定 で き 、 そ れ に よっ て CSS の 適用 対象 
と する 出力 媒体 を 限定 し た い 場 合 に 使用 し ます 。 





























値 に 

a11 すべ て の 機器 

| screen パソ コン 画面 ー ー ー 還 還 計 郭 
Print ] プリ ンタ 

projection | プロ ジェ クタ 

tv テレ ビ 。。 還 康 
| handhe1d 携帯 用 機器 (画面 が 小さ く 回 線 容量 も 小さ い 機器 ) 

tty 文字 橋 が 固定 の 端末 (テレ タイ プ や ター ミナ ル な ど ) 

| speech スピ ー チ ・ シ ン セ サイ ザー( 音 声 読み 上 げ ソ フト な ど ) 
braille 点字 ディ スプ レイ 

embossed ] 点 字 プ リン タ 癌 5 











media 属性 に 指定 で き る 値 。 これ に よっ て CSS を 適用 する 出力 媒体 を 限定 で きる 





ぁみ CSS3 で の 拡張 点 


CSS2.1 で 指定 で きる の は ここ まで だ っ た の で す が 、CSS3 か ら は この 機能 が 拡張 され て 、 出 力 媒 
体 の 種類 だ け で な くそ の 召 体 の 特性 や 状態 を 示す 式 も 書き 込め る よう に な っ て いま す 。 こ れ に よっ 
て 、 た と えば ウィ ンド ウ の 幅 が 640 ピ クセ ル よ り も 小さ けれ ば この CSS を 適用 し 、640 ピ クセ ル 
以上 で あれ ば この CSS を 適用 する 、 と いっ た 指定 が 可能 に な り ま す 。 こ の よう に 、 出 力 媒体 の 特 
性 や 状態 を 式 に あら わし て 適用 する CSS を 指定 で きる 機能 の こと を メデ イア クエ リー と 言い ます 。 
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メデ ィ ア クエ リー は 、Internet Explorer は バー ジョ ン 9 以 降 で し か 対応 し て いま せん が 、 そ れ 以 外 
の 比較 的 新しい ブラ ウザ で は ほぼ 問題 な く 対応 し て いま す 。 








メデ ィ ア クエ リー の 書き 方 icssssi 








指定 可能 な 出力 媒体 の 特性 (メディ ア 特 性 ) に は 右 ペ ー ジ の 表 の も の が あり ます 。 こ れ ら の メデ ィ 
ア 特 性 に は 、CSS の プロ パテ ィ と 同様 の 書式 で 値 を 指定 し て 使い ます ( 値 を つけ ず に メデ ィ ア 特性 
だ け で 指定 で きる も の も あり ます )。 値 に は CSS で 指定 で きる も の と 同じ 単位 が 指定 で きま す 。 た 
と えば 、「min-width: 640px] の よう に 書け ば 「 表 示 領 域 の 幅 が 640 ピクセル 以 上 ] と いう 意 
味 に な り ま す 。 


ぁ b 出力 媒体 の 指定 


で は 、 こ の よう な 式 を 具体 的 に どう 記述 で きる の か を 説明 し て いき まし ょ う 。CSS2.1 で も 指定 可 
能 だ っ た 出力 媒体 は 、 た と えば link 要 素 や style 要素 の media 属 性 で 次 の よう に 指定 し まし た 。 





CSS 














CSS2.1 で 可能 だ っ た 範囲 の media 属 性 の 指定 方 法 と 指定 例 


メデ ィ ア クエ リー を 使用 する 場合 は 、 出 力 媒体 の あと に 必要 な 数 だ け 「and (メデ ィ ア 特性 : 値 )] 
を 追加 し て 条件 を 加え て いき ます 。 す る と 、「 出 力 媒体 ] と 「 メ ディ ア 特 性 : 値 ] の 式 が すべ て 成 
り 立つ 場合 に の み CSS が 適用 され る こと に な り ま す 。 も ちろ ん 、 こ れ ま で 同様 に カン マ で 区 切っ 
て 複数 の 出力 媒体 (お よび and (メデ ィ ア 特性 : 値 )) を 指定 する こと も で きま す 。 





CrAPTEk !O その 他 の 機能 と テク ニッ ク 








width 
min-width 
max-width 


height 
min-height 
max-height 






device-width 
min-device-width 
max-device-w1idth 


トーーーーーーーーーーーーーーーーーーーーーー+ 


device-height 
min-device-height 
max-device-height 










表示 領域 の 幅 ※ ス クタ ロー リル バー も 含む 











実数 十 単 位 











出力 機器 の 画面 全体 の 最大 の 高 さ (これ 以下 で 適用 ) 


表示 領域 の 最小 の 幅 (これ 以上 で 適用 ) 実数 十 単 位 
表示 領域 の 最大 の 幅 (これ 以下 で 適用 ) 実数 十 単位 
表示 領域 の 高 さ ※ ス クロ ー ル バー も 含む 実数 十 単 位 
表示 領域 の 最小 の 高 さ (これ 以上 で 適用 ) 実数 十 単位 
表示 領域 の 最大 の 高 さ (これ 以下 で 適用 ) 実数 十 単位 
出力 機器 の 画面 全体 の 幅 実数 十 単 位 
出力 機器 の 画面 全体 の 最小 の 幅 (これ 以上 で 適用 ) 実数 十 単位 
出力 機器 の 画面 全体 の 最大 の 幅 (これ 以下 で 適用 ) 実数 十 単位 
出力 機器 の 画面 全体 の 高 さ 実数 十 単位 
出力 機器 の 画面 全体 の 最小 の 高 さ ( こ れ 以 上 で 適用 ) 実数 十 単位 

実数 十 単位 





orientation 


aSDect-rat1o 
min-aspect-ratio 
maX-aSDect-rat1o 








device-aspect-ratio 


min-device-aspect-ratio 
max-device-aspect-ratio 


縦長 ・ 縦 横 同じ (portrait) 横長 (landscape) portrait, Iandscape 
width と height の 比率 整数 / 整 数 ※ 移 43 
width と height の 最小 の 比率 (これ 以上 で 適用 ) 整数 / 整 数 

width と height の 最大 の 比率 (これ 以下 で 適用 ) 整数 / 整 数 
device-width と device-height の 比率 整数 / 整 数 ※ 例 :16/9 
device-width と device-height の 最小 の 比率 (これ 以上 で 適用 ) | 整数 / 整 数 


device-width と device-height の 最大 の 比率 (これ 以下 で 適用 ) | 整数 / 整 数 


























ェ ーーーT 

color カラ ー コ ン ポ ボー ネン ト の ビッ ト 数 整数 

min-color カラ ー コ ン ポ ー ネ ン ト の ビッ ト 最 小 の 数 (これ 以上 で 適用 ) 整数 

max-color カラ ー コ ン ポ ー ネ ン ト の ビッ ト 最 大 の 数 (これ 以下 で 適用 ) 整数 

color-1ndex カラ ー ル ッ ク ア ッ プ テー ブル の 人 色 数 整数 
min-color-1ndex カラ ー ル ッ ク ア ッ プ テー ブル の 最小 の 色 数 (これ 以上 で 適用 ) 整数 
max-color-1ndex カラ ー ル ッ ク ア ッ プ テー ブル の 最大 の 色 数 (これ 以下 で 適用 ) 整数 

monochrome モノ クロ の ビッ ト 数 整数 
min-monochrome モノ クロ の 最小 の ビッ ト 数 (これ 以上 で 適用 ) 整数 
max-monochrome モノ クロ の 最大 の ビッ ト 数 (これ 以下 で 適用 ) 整数 

resolution 解像度 実数 十 dpi, 実数 十 dpcm 
min-resolution 最小 の 解像度 (これ 以上 で 適用 ) 実数 十 dpi, 実数 十 dpcm 
max-resolution 最大 の 解像度 (これ 以下 で 適用 ) | 実数 十 dpi, 実数 十 dpcm 
scan テレ ビ の 走査 方 式 | progressive, interlace 
gr1d ビッ トマ ッ プ で は な い グ リッ ド 方 式 (文字 幅 固定 の 機器 な ど ) | 整数 











メデ ィ ア クエ リー で 用 意 さ れ て いる メデ ィ ア 特性 
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CSS 














メデ ィ ア クエ リー を 使用 する 場合 の 書式 と 指定 例 








@media に つい て 








@media を 使っ た 書式 を 利用 する と 、CSS の ソー スコ ー ド の 中 に 出力 媒体 と メデ ィ ア クエ リー の 
指定 を 書き 込む こと が で きま す 。 こ うす る こと で 、 特 定 の 出力 媒体 が 特定 の 状態 に な っ て いる 場合 
に の み 、 そ の 部 分 の 指定 を 適用 させ る こと が 可能 に な り ま す 。 








CSS 


01 @media 出力 媒体 メデ ィ ア クエ リー { 
セレ クタ { プロ パテ ィ : 値 : ・・・} 
セレ クタ { プロ パテ ィ : 値 :・・・} 


セレ クタ { プロ パテ ィ : 値 :・・・] 





CSS 


01 @media screen and (min-width: 640px) and (max-width: 800px) { 
02 。 #main {float: none: } 

03 。 #Sub { float: none: } 

04  p { font-size: 13px: } 

05 } 














@media の 書式 と 指定 例 。 こ の 例 で は 、 パ ソコ ン 画 面 で 表示 領域 の 幅 が 640 ビク セル 以上 800 ビク セル 以下 の 場合 に の み 、{ ] 内 の 
CSS が 適用 され る 


CgAPTEF !O その 他 の 機能 と テク ニッ ク 


CgAP ナ E // 








ee 


し c て り rc 


トラ ンス フォ ー ム 関連 プロ パテ ィ 


まず は 、 回 転 ・ 拡 大 縮小 ・ 移 動 ・ 傾 斜 に つい て で す 。 こ れ ら は すべ て transform プロ パテ ィ を 
使用 し て お こない ます 。 こ れ ら の 変形 を お こ な う 際 に は 、 基 準 と な る 原点 が どこ に ある の か を 
考え る こと も 重要 で す 。 











回 転 ・ 拡 大 縮小 ・ 移 動 ・ 傾 斜 leswi 











transform プロ パテ ィ を 使用 する と 、 そ れ だ け で 回 転 ・ 拡 大 縮小 ・ 移 動 ・ 傾 斜 の すべ て を 、 し か も 
必要 で あれ ば 同時 に お こ な う こと が で きま す 。 た だ し 、 こ の プロ パテ ィ だ け で は 、 変 化 の 過程 を ア 
ニメーション の よう に 表示 させ る こと は で きま せん 。 こ の プロ パテ ィ で 表示 で きる の は 、 最 終 的 な 
表示 結果 だ け で す 。 


値 は それ ぞ れ の 機能 に 合わ せ た 関数 形式 に な っ て お り 、 半 角 ス ペー ス で 区 切っ て 必要 な だ け 指 定 
する こと が で きま す 。 値 は 指定 され た 順番 に 実行 され ます の で 、 指 定 する 順序 に よっ て 表示 結果 
が 変わ る 場合 も ある 点 に 注意 し て くだ さい 。 な お 、 こ の プロ パテ ィ で ボッ クス の 大 き さ や 位置 な ど 
を 変更 し て も 、 ま わり の 要素 の 配置 位置 に は 影響 は 一 切 あり ませ ん 。 指定 で きる の は 次 の 値 で す ( 実 
際 に は 3D 用 の 値 な ども 用 意 さ れ て いま す が 、 本 書 で は 2D 用 の 値 を 中 心 に 抜粋 し て 紹介 し て いま す )。 


transform に 指定 で きる 値 


・rotate( 角度 ) 
時 計 回 り に 回 転 させ る 角度 を 単位 ( 度 -deg) つ き の 実 数 で 指定 し ます 。 


・scale( 実数 , 実数 ) 
拡大 縮小 させ る 倍率 を 横 方 向 ・ 縦 方 向 の 順に 、 単 位 を つけ な い 実 数 で カン マ で 区 切っ て 指定 し 
ます 。 値 を 1 つ だ け 指 定 す る と 、 そ の 値 が 横 方 向 ・ 縦 方 向 の 両方 に 適用 され ます 。 


・scaleX( 実数 ) 
横 方 向 に 拡大 縮小 させ る 倍率 を 単位 を つけ な い 実 数 で 指定 し ます 。 


・scaleY( 実数 ) 
縦 方 向 に 拡大 縮小 させ る 倍率 を 単位 を つけ な い 実 数 で 指定 し ます 。 








transform に 指定 で きる 値 (続き ) 


・translate( 単位 つき の 実数 , 単位 つき の 実数 ) 
移動 させ る 距離 を 右 方 向 ・ 下 方 向 の 順に 、 単 位 つ き の 実 数 また は パー セン テー ジ で 指定 し ます 。 
負 の 数 値 を 指定 する と 左 方 向 ・ 上 方 向 に 移動 し ます 。 値 を 1 つ だ け 指 定 す る と 、 右 方 向 へ の 移動 
距離 だ け を 指定 し た こと に り ま す 。 


・translateX( 単位 つ き の 実 数 ) 
右 方 向 に 移動 させ る 距離 を 単位 つき の 実数 また は パー セン テー ジ で 指定 し ます 。 人 負 の 数 値 を 指 
定 する と 左 方 向 に 移動 し ます 。 


・translateY( 単 位 つ き の 実 数 ) 
下方 向 に 移動 させ る 距離 を 単位 つき の 実数 また は パー セン テー ジ で 指定 し ます 。 負 の 数 値 を 指 
定 す る と 上 方 向 に 移動 し ます 。 


・skew( 角度 ) 
傾斜 させ る 角度 を 、x 軸 に 沿っ た 傾斜 の 角度 ・y 軸 に 沿っ た 傾斜 の 角度 の 順に 、 単 位 ( 度 =deg) 
つき の 実数 で カン マ で 区 切っ て 指定 し ます 。 値 を 1 つ だ け 指 定 す る と 、x 軸 に 沿っ た 傾斜 の 角度 
だ け を 指定 し た こと に な り ま す 。 


・skewX( 角度 ) 
x 軸 に 沿っ た 傾斜 を させ る 角度 を 、 単 位 ( 度 =deg) つきの 実 数 で 指定 し ます 。 


・skewY( 角度 ) 
y 軸 に 沿っ た 傾斜 を させ る 角度 を 、 単 位 ( 度 =degq) つき の 実数 で 指定 し ます 。 


・none 
回 転 ・ 拡 大 縮小 ・ 移 動 ・ 傾 斜 を 一 切 し て いな い 状 態 と な り ま す 。 


みゆ transform プロ パテ ィ の 使用 例 


で は 使用 例 を 見 て 、 実 際 の 機能 を 確認 し て み ま し ょ う 。 以下 の サン プル で は 、 正 方 形 の トマ ト の 写 
真 を 4 つ 配 置 し て いま す (sample1 sample4 の id が 指定 され て いま す )。 最 初 の 写真 は その まま 
表示 させ 、2 つ め の 写 真 は 時 計 回 り に 45 度 回 転 さ せ て いま す 。3 つ め の 写 真 は 、 横 方 向 に の み 3 倍 
に 拡大 し て あり ます 。4 つ め の 写 真 は 、 右 に 300 ピ クセ ル 、 上 に 300 ピ クセ ル 移 動 さ せ 、x 軸 に 沿 
っ て 45 度 傾斜 させ て いま す 。 





ヨ ユ d マ ロ ュ 


HTML sample/chapter-11/lecture-11-1/01.html 


01 <p><img id="sample1" src="tomato.jpg" alt=" トマ ト の 写真 "></p> | 
02 <p><img id="sample2" src="tomato.jpg" al1t=" トマ ト の 写真 "> く </p> | 

く p><jimg 1d="sample3" src="tomato.jpg" alt=" トマ ト の 写真 "> く /p> | 
4 <P>< く jimg 1d="sample4" src="tomato.jpq" alt=" トマ ト の 写真 "> く /p> 
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CSS 


sample/chapter-11/lecture-11-1/01-transform.css 








まき 


01 body { margin: 30px 120px: } 


-webkit-transform: translate(300px, -300px) skew(45deg): 


02 jmg { 

03 width: 120px: 

04 height: 120px: 

05 } 

06 #sample2 { 

07 -webkit-transform: rotate(45deg): 

08 -moz-transform: rotate( 45deg): 

09 -ms-transform: rotate(45deg): 

10 -o-transform: rotate(45deg): 

11 transform: rotate(45deg): 

12 } 

13 #sample3 { 

14 -webkit-transform: scaleX(3): 

は 朱 -moz-transfOrm: ScaleX(3): 

16 -ms-transformW: SCaleX(3): 

17 -o-transform: ScaleX(3): 

18 transform: ScaleX(3): 

19 } 

20 #sample4 { 

21 

22 -moz-transform: translate(300px, -300px) skew(45deg): 
23 -ms-transform: translate(300px, -300px) skew(45deg): 
24 -o-transform: translate(300px, -300px) skew(45deg): 
25 transform: translate(300px, -300px) skew(45deg): 
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transform プロ パテ ィ の 使用 例 。4 つの 写真 を 表示 させ 、2 つ めか ら 4 つ め を それ ぞ れ 回 転 ・ 拡 大 ・ 移 動 と 傾斜 させ て いる 


上 の ソー スコ ー ド を 


表示 させ た と ころ 











この プロ パテ ィ に は 、Internet Explorer も バー ジョ ン 9 か ら 対 応 し て いま す 。 現時点 で この プロ パ 
ティ を 使用 する に は 、 各 ブラ ウザ の ベン ダー プレ フィ ックス を つけ る 必要 が あり ます 。 








transform の 原点 の 変更 icsss 








transform プロ パテ ィ の サン プル の 表示 結果 を 見 る と 、 回 転 や 拡大 縮小 な ど が 、 ボ ックス の 中 心 を 原 
点 と し て お こ な わ れ て いる こと が 分 か り ま す 。 こ の 原点 の 位置 を 変更 する に は 、transform-origin プ 
ロバ パティ を 使用 し ます 。 次 の 値 が 指定 で きま す 。 


transform-origin に 指定 で きる 値 





値 は 、 ボ ックス の 左上 を 0 と する 座標 か キー ワー ド で 指定 し ます 。 単位 つき の 実数 また は パー セン テ 
ー ジ で 指定 する 場合 は 、x 軸 の 値 、y 軸 の 値 の 順に 半角 スペ ー ス で 区 切っ て 指定 し ます 。 キ ー ワ ー ド 
の 場合 は 順序 に 関係 な く 半 角 ス ペー ス で 区 切っ て 指定 し で きま す 。 


実は h、 こ の プロ パテ ィ の 初期 値 は 「50% 50%] で ある た め 、transform プロ パテ ィ の サン プル で は 、 
回 転 や 拡大 縮小 な ど が ボッ クス の 中 心 を 原点 と し て お こ な わ れ て いた と いう わけ で す 。 


原点 を 変更 する 


先程 の サン プル に 、 ボ ックス の 左上 を 原点 に する 指定 を 追加 し た も の が 次 の サン プル で す 。 表 示 
結果 を 見 る と 、 回 転 や 拡大 な ど が 画像 の 左上 を 原点 と し て お こ な わ れ て いる こと が 分 か り ます 。 
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CSS sample/chapter-11/lecture-11-1/02-transform-origin.css ( 抜 律 ) 





01 body { margin: 30px 120px: 

62 img { 

03 width: 120px: 

04 height: 120px: 

05 -webkit-transform-origin: top left: 







06 -moz-transform-origin: top left: 

07 -ms-transform-origin: top left: 追加 
08 -0-transform-Oorigin: top left: 

09 transform-origin: top left: 

10 } 

11 CDE 








原点 を ボッ クス の 左上 に 変更 する ソー ス を 追加 














回 転 や 拡大 な ど が 、 画 像 の 左上 を 原点 と し て お こ な わ れる よう に な っ た 


CAPrE ょ 「! 変形 と アニ メー ショ ン 








い ー と 


し ee E 
トラ ンジ ショ ン 関 連 プ ロ パ ティ 


徐々 に 変化 させ る 効果 を 指定 で きる の が CSS3 の トラ ンジ ショ ン 関 連 プ ロ パ ティ で す 。 





トラ ンジ ショ ン の 基本 プロ パテ ィ lcsssml 














セレ クタ の :hover を 使用 する な ど し て 、 あ る プロ パテ ィ の 値 が 変化 する と き に 、 有 瞬時 に 切り 替わる 
の で は な く 指 定 し た 時 間 を か け て アニ メー ショ ン の よう に 徐々 に 変化 させ る の が CSS3 の トラ ンジ シ 
ョ ン で す 。 ど の プロ パテ ィ の 値 が 変化 し た と き に トラ ンジ ショ ン を 適用 する の か を 指定 する の が 
transition-property プロ パテ ィ で 、 変 化 に か ける 時 間 は transition-duration プロ パテ ィ で 指定 し ま 
す 。 それぞれ 次 の 値 が 指定 で きま す 。 


transition-property に 指定 で きる 値 


・ プ ロ パ ティ 名 
トラ ンジ ショ ン を 適用 する プロ パテ ィ の 名 前 を その まま 指定 し ます 。 カ ンマ で 区 切っ て 複数 指 
定 で きま す 。 


・a11 
トラ ンジ ショ ン の 適用 が 可能 な すべ て の プロ パテ ィ に 適用 し ます 。 


・none 
トラ ンジ ショ ン を 適用 し ませ ん 。 


transition-duration に 指定 で きる 値 


・ 時 間 
トラ ンジ ショ ン の 変化 に か ける 時 間 を 単位 付き の 数 値 で 指定 し ます 。 単位 に は 、「s ( 秒 )」 と 「ms 
(ミリ 秒 )] が 指定 で きま す 。 





< 
> 
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2 デ 2 





ぁ ぁ transition-property と transition-duration の 使用 例 


で は 、 具 体 的 に どう な る の か を サン プル で 見 て み ま し ょ う 。HTML で は サメ の お も ちゃ の 写真 ( 背 
景 を 透明 に し た 透過 PNG) を 表示 させ て いる だ け で す 。CSS で は 、 ま ず body 要素 の 背景 と し て 海 
底 の 写真 を 表示 させ て いま す 。 そ し て 、transition-property プロ パテ ィ で 、transform プロ パテ ィ 
の 値 が 変化 し だ た と き に トラ ンジ ショ ン を 適用 する よう に 指定 し て いま す 。 こ の と き 、 現 時 点 で は 
transition-property と transform の 両方 に ベン ダー プレ フィ ックス の 指定 が 必要 で ある 
点 に 注意 し て くだ さい 。 そ し て 同じ く ベ ンダ ー プ レフ ィ ッ クス を つけ た transition-duration プロ パ 
ティ で 、 ト ラン ジ シ ョ ン に か ける 時 間 を 2 秒 (2s) に 設定 し て いま す 。CSS の 最後 に 、 画 像 の 上 に 
カー ソル を 重ね た と き の 指 定 が あり 、 そ こ で は transform プロ パテ ィ を 使用 し て サメ の 写真 を 右 に 
300 ピクセル 移動 させ て いま す 。 で は 、 こ の サン プル を ブラ ウザ で 表示 させ て 、 サ メ の 写真 の 上 に 
カー ソル を の せ て みて くだ さい 。 





HTML sample/chapter-11/lecture-11-2/01.html 





01 <d1iv> 
02 <1jmg src="shark.png" al1t=" サ メ の 写真 "> 
03 </div> 








CSS sample/chapter-11/lecture-11-2/01-transition-property.CSSs 





01 htm1, body { height: 100%: } 
02 body { 

03 。 margin: 0: 

04 background: ur1(sea.jp9): 
05 -webk1it-background-s1ize: COVer: 
06 -moz-background-s1ze: COVeri 
07 background-sS1ze: COVeri 

08 } 

09 jmg { 

10 margin-top: 100Ppx: 

11 width: 300px: 

12 height: 150px: 


13 -webk1it-transition-Droperty: -webkit-transformi 
14 -webkit-transition-duration: 2s: 

15 -moz-transition-property: -moz-transformi 

16 -moz-transition-duration: 2S: 

17 -ms-trans1ition-DFODerty: -ms-transform: 

18 -ms-transition-duration: 25: 

19 -o-transition-property: -o-transformz 

20 -o-transition-duration: 2S: 


21 transition-property: transformz 

22 trans1tion-duration: 2s: 

23 } 

24 1mg:hover { 

25 -webkit-transform: translateX(300Dx) : 
26 -moz-transform: translateX(300px): 
27 -ms-transform: translateX(300Dx): 














CaAPrEe+ !! 変形 と アニ メー ショ ン 





28 -o-transform: translateX(300px) : 
29 transform: translateX(300px) : 
30 } 








トラ ンジ ショ ン の サン プル の ソー スコ ー ド 





① サ メ の 写真 の 上 に カー ソル を の せる ⑧ す る と 、 サ メ は な め ら か に 右側 に 移動 する 


この サン プル で は 場所 を 移動 させ て いま す が 、transform プロ パテ ィ が 使用 で きる と いう こと は も 
ちろ ん 回 転 や 拡大 縮小 も で きま すし 、 そ れ 以 外 の color プ ロ パ ティ や background プロ パテ ィ で 色 
な ど を 変え る こと も 可能 で す 。 

サン プル で は 4 種類 の ブラ ウザ 向け の ベン ダー プレ フィ ックス を 指定 し て は いま す が 、Interenet 
Explorer に つい て は バー ジョ ン 9 で も 未 対応 で す 。 し か し バー ジョ ン 10 で は 対応 予定 と な っ て い 
ます の で 、Interenet Explorer 向 け の ベン ダー プレ フィ ックス も 加え て あり ます 。 








トラ ンジ ショ ン の その 他 の プロ パテ ィ !csssml 








transition-delay プロ パテ ィ は 、 ト ラン ジ シ ョ ン の 開始 を 遅らせ る た め の プ ロ パ ティ で す 。 初期 値 は 
0s (0 秒 ) で 、 指 定 で きる の は 遅らせ る 時 間 だ け で す 。 


transition-delay に 指定 で きる 値 
・ 時 間 


変化 を 開始 する まで の 時 間 を 単位 付き の 数 値 で 指定 し ます 。 単位 に は 、「s ( 秒 )」 と 「ms (ミリ 秒 )」 
が 指定 で きま す 。 











ー 


ラン ジ シ ョ ン の 開始 か ら 終 了 ま で の 総合 時 間 は transition-duration プロ パテ ィ で 指定 し た も の で 
固定 で す が 、 そ の 時 間 内 で の 加速 や 減速 の 加減 は transition=timing-function プロ パテ ィ で 調整 す 
こと が で きま す 。 次 の 値 が 指定 で きま す 。 初期 値 は 「ease] で す 。 


の 較 


transition-timing-function に 指定 で きる 値 


・eaSe 
加速 を つけ て 、 ゆ っ くり と 始ま り 、 ゆ っ くり と 終わ り ま す 。 


・ease-1jn 
ゆっ くり と 始ま り 、 一 定 速度 で 終わ り ま す 。 


・ease-0ut 
一 定 速度 で 始ま り 、 ゆ っ くり と 終わ り ま す 。 


・ease-1n-0OUt 
ゆっ くり と 始ま り 、 ゆ っ くり と 終わ り ま す 。 


・]inear 
最初 か ら 最 後 ま で 一 定 の 速度 で 変化 し ます 。 


ぁみ transition-timing-function の 使用 例 


CaAPrEr !! 変形 と アニ メ 


で は 、transition-timing-function プロ パテ ィ に よる 変化 速度 の 違い を サン プル で 見 て み ま し ょ う 。 
この サン プル で は サメ の 写真 を 縦 に 5 つ 表 示さ せ 、 そ の 上 に カー ソル を の せる と 動く よう に な っ て 
いま す 。 それぞれ に transition-timing-function プロ パテ ィ を 指定 し て 、 加 速 や 減速 の タイ ミン グ 
を 変え た て あり ます 。 な お 、 す べ て の ベン ダー プレ フィ ックス を 記述 し て いる と ソー スコ ー ド が 大 変 
長く な っ て し まい 、 指 定 内 容 が 理解 し に くく な っ て し まい ます の で 、 こ の サン プル で は 「-webkit-] 
向け の 指定 の み 記 述 し て いま す 。 





| 01 <div> 

02 <jmg id="sample1" src="shark1.png" a1t=" サメ の 写真 "> く br> 

3 <jmg id="sample2" src="shark2.png" alt=" サメ の 写真 "> く <br> 

04 <jimg 1d="sample3" src="shark3.png" alt=" サメ の 写真 "> く br> 

<jmg 1d="sample4" src="shark4.png" alt=" サメ の 写真 "> く br> 
06 <jmg id="sample5" src="shark5.png" alt=" サメ の 写真 "> 

| 07 </d1v> 


mn 











ショ ン 











CSS sample/chapter-11/lecture-11-2/02-timing-function.css 








0 り 1 html, body { height: 100%: } 

02 body { 

03 。 margin: 0: 

04 background: ur1(sea.jpg): 

05 -webkit-background-size: coVer: 

06 -moz-background-s1ze: Cover: 

07 background-size: COVer: 

08 } 

09 1mg 【 

10 width: 300px: 

11 height: 150px: 

12 -webkit-transition-property: -webkit-transform: 

13 -webkit-transition-duration: 2s: 

14 ] 

15 1mg:hover { -webkit-transform: translateX(300px): } 

16 #sample1 { -webkit-transition-timing-function: ease: } 

17 #sample2 { -webkit-transition-timing-function: ease-jn: } 
18 #Sample3 { -webkit-transition-timing-function: ease-out: 1 
19 #sample4 { -webk1it-transition-timing-function: ease-jn-out: ] 
20 #Sample5 { -webkit-transition-timing-function: ]inear: } 




















transition-timing-function プロ パテ ィ に より 、 ト ラン シシ ョ ン 時 の 加速 や 減速 の タイ ミン グ を 変え た サン プル 


ーー 





④ サ メ の 写真 に カー ソル を の せる と 、 指 定 さ れ た 速度 の 加減 で 
動き 出す 


① サ ンプ ブル を ブラ ウザ で 表示 させ た と ころ 


この サン プル で は 、 す べ て の 写真 が 同時 に 動く わけ で は な い の で それ ぞ れ の 違い が 比較 し に くい か 
も し れ ま せん 。 こ の あと の アニ メー ショ ン の 解説 に 出 て くる 同様 の サン プル (sample/chapter-11/ 
lecture-11-3/02.htm) で は すべ て の 写真 が 同時 に 動き ます の で 、 速 度 変化 の 違い な ど は あら た め 
て そちら で 確認 し て くだ さい 。 
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トラ ンジ ショ ン の 一 括 指 定 icsssml 








transition プロ パテ ィ を 使用 する と 、 ト ラン ジ シ ョ ン 関 連 の 値 を 半角 スペ ー ス で 区 切っ て 一 度 に 指定 
する こと が で きま す 。 現時 点 (2012 年 7 月 ) で は 、 最 初 に 指定 され た 時 間 は transition-duration プロ 
パテ ィ の 値 で 、2 番 目 に 指定 され た 数 値 は transition-delay プロ パテ ィ の 値 と いう こと に な っ て いま 
す が 、 こ の 仕様 は 最終 的 に は 変更 され る 可能 性 も あり ます (時 間 を 2 つ 指定 する と き は スラ ッシュ で 
区 切る 案 も 出 て いま す )。 


transition に 指定 で きる 値 





次 の サン プル は 、transition プロ パテ ィ を 使用 し た も の で す 。 サ メ の 写真 に カー ソル を の せる と 、 サ 
メ が 右 に 移動 し つつ 0.2 倍 に 縮小 され ます 。 





HTML sample/chapter-11/lecture-11-2/03.html 


01 <div> 
02 <jmg src="shark.png" a1t=" サメ の 写真 "> 
03 </div> 





CSS sample/chapter-11/lecture-11-2/03-transition.cSs 


01 htm1, body { height: 100%: } 

02 body { 

03 margin: 0: 

04 background: ur1(sea.JP9): 

05  -webkit-background-size: COVer: 
06  -moz-background-s1ize: cover 
07 background-s1ze: CoVer: 

08 } 

09 img { 

10 margin-top: 100px: 











CaAPrE ょ !! 変形 と アニ メー ショ ン 





11 width: 300px: 

12 height: 150px: 

13 -webkit-transition: -webkit-transform 2sr 
14 -moz-transition: -moz-transform 2s: 


15 -ms-transition: -ms-transform 2s: 

16 -o9-transition: -o-transform 2s: 

17 transition: transform 2s: 

18 } 

19 imgihover { 

20 -webkit-transform: translateX(300px) scale(0.2): 
21 -moz-transform: translateX(300px) scale(0.2): 
22 -ms-transform: translateX(300px) scale(0.2): 
33 -o-transform: translateX(300px) scale(0.2): 
24 transform: translateX(300px) scale(0.2): 

きち ] 














トラ ンジ ショ ン を transition プロ パテ ィ だけ で 指定 し て いる 例 











① 上 の ソー スコ ー ド を ブラ ウザ で 表示 させ た と ころ ② サ メ の 写真 に カー ソル を の せる と 、 右 に 移動 し つつ 小さ く な 


っ て いく 








旧 っ 


UcefyFE 
アニ メー ショ ン 関 連 プ ロ パ ティ 


アニ メー ショ ン 関 連 プ ロ パ ティ を 使う と 、 ア ニメーション 全体 で 、 プ ロ パ ティ の 状態 を 細か く 
設定 する こと が で きま す 。 








@keyframes の 指定 方 法 icsss ぁ l 




















CSS3 の アニ メー ショ ン と は 、 簡 単に 言え を ば トラ ンジ ショ ン を 連続 し て 実行 させ る よう な も の で す 。 
アニ メー ショ ン 全 体 の 時 間 の 中 の どの 時 点 で どの プロ パテ ィ が どの 状態 に な る の か と いう こと を 
@keyframes { } と いう 書式 で 指定 し て 実行 させ ます 。 


@keyframes 名 前 【 

0% { 
プロ パテ ィ : 
プロ パテ ィ : 






且 


] 
O% { 
プロ パテ ィ : 
プ 蜂 パ 寺 で 5 







人 


O% { 
プロ パテ ィ : 値 : 
プロ 7% デ イ |: ロ 






] 
100% { 
プロ パテ ィ : 
プロ パテ ィ : 


凍 


] 


CSS3 の アニ メー ショ ン の e@keyframes の 書式 
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は じ め に 「@keyframes] と 書き 、 半 角 ス ペー ス で 区 切っ て この 書式 (キー フレ ー ム ) に 名 前 を つけ ま 
す 。2012 年 7 月 現在 で は この 「@keyframes] に も ベン ダー プレ フィ ックス を つけ る 必要 が あり 、 
[@-webkit-keyframes] や 「@-moz-keyframes] の よう に 書か な けれ ば 動作 し ませ ん 。 


% の 指定 に つい て は 、 ア ニメーション 全体 の 時 間 の 中 の 何 % の 時 点 で 、 ど の プロ パテ ィ の 値 が どの 
状態 な る の か を 記述 し て いき ます 。 プ ロ パ ティ と 値 は いく ぐつ で も 記述 で きま す 。0% {] と 100% 
{ } の 指定 は 必須 で す が 、 そ の あい だ の % は 自由 に 指定 で きま す 。 


な お 、 こ の よう な 指定 を ベン ダー プレ フィ ックス 別に 記入 し て いく と 、 ソ ー ス コー ド が 大 変 長 く な っ 
て し まい 、 全 体 の 内 容 を 把握 する の が むず か し く な っ て し まい ます 。 そ の た め 、 本 書 で は 「-webkit-] 
を つけ た 指定 の み を 記入 し て 、 そ の 他 の ブラ ウザ 向け の 指定 は 以降 すべ て 省略 する こと に し ます 。 
IE9 も Opera11 も アニ メー ショ ン に は 未 対応 で す が 、Firefox は バー ジョ ン 5 か ら 対 応 し て いま す の で 、 
「-moz -] を つけ た 指定 も 追加 する と Firefox で も 動作 する よう に な り ま す 。 








アニ メー ショ ン の 基本 プロ パテ ィ |csssl 








アニ メー ショ ン を 実行 させ る に は 、 実 行 さ せ た い 「@keyframes」 の 名 前 を animation-name プロ 
パテ ィ の 値 と し て 指定 し ます 。 カ ンマ で 区 切っ て 複数 の 名 前 を 指定 する こと も で きま す 。 
[@keyframes」 で 指定 し た アニ メー ショ ン 全 体 の 長 さ (時 間 ) は 、animation-duration プロ パテ ィ で 
指定 し ます 。 そ れ ぞ れ の プロ パテ ィ に 指定 で きる の は 、 次 の 値 で す 。 


animation-name に 指定 で きる 値 





animation-duration に 指定 で きる 値 








と アニ メー ショ ン の 実例 


で は 、 実 際 に どう や っ て アニ メー ショ ン さ せる の か を サン プル で 見 て み ま し ょ う 。 次 の サン プル で 
は 、「@keyframes] に 「shark] と いう 名 前 を つけ て いま す 。CSS の ソー スコ ー ド の 最後 の 4 行 
の と ころ で 、:hover で それ を 実行 させ て いま す 。 ア ニメーション の トー タル 時 間 は 、animation- 
duration プロ パテ ィ で 20 秒 に 設定 し て いま す 。 





HTML sample/chapter-11/lecture-11-3/01.html 





01 <d1iv> 
02 <img src="shark.png" alt=" サメ の 写真 "> 
03 </div 





CSS sample/chapter-11/lecture-11-3/01-animation-name.cSss 





01 htm1, body { height: 100%: } 
02 body { 

03 margin: 0: 

04 background: ur1(sea.JP9): 
05 -webkit-background-s1ze: cover: 
06 -moz-background-s1ze: COVer: 
07 background-s1ze: CoOVer: 

08 } 

09 1mg { 

10 margin-top: 100px: 

11 width: 300px: 

12 height: 150px: 








43 # 

14 @-webk1it-keyframes shark { 

15 0%【 

16 -webkit-transform: scale(1.0): 

17 ] 

18 20%{ 

19 opacity: 0.6: 

20 -webkit-transform: translateX(500px) scale(0.2): 
21 } 

22 21%【 

23 opacity: 0.5: 

24 -webkit-transform: translateX(500px) rotate(-90deg) scale(0.2): 
25 } 

26 22% ( 

27 opac1ity: 0.5: 

28 -webkit-transform: translate(500px, -500px) rotate(-90deg) 
29 scale(0.2): 

30 } 

31 23% { 

32 -webkit-transform: translate(-500px, -500px) : 
33 ] 

34 。 24% [ 

35 -webkit-transform: translate(-500px): 

36 ] 
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叶 入 98% { 
38 -webkit-transform: translate(-300px) scale(6.0): 


導 ま 。 

40 100% [ 

41 -webkit-transform: scale(1.0): 
42 } 

43 } 

44 1mg:hover { 

45 -webk1it-animation-name: shark: 
46 -webk1t-animation-duration: 20s: 
47 } 














CSS3 に よる アニ メー ショ ン の サン プル の ソー スコ ー ド 


① サ ンプ ル を ブラ ウザ で 表示 させ た と ころ 








⑧ サ メ の 上 に カー ソル を の せる と 右 に 移動 し て 小さ く な る と 同 
時 に 半 透 明 に な り 、 サ メ は 画面 上 に 一 旦 消え る 





③ そ の 後 、 サ メ は 画面 左側 から ゆ っ くり と 現れ る 


2@1 

















アニ メー ショ ン の その 他 の プロ パテ イィ |csssml 








トラ ンジ ショ ン に は 、 開 始 を 遅らせ る transition-delay プロ パテ ィ と 、 加 速 や 減速 の 加減 を 調整 する 
transition-timing-function プ ロ パ ティ が あり まし た 。 ア ニメーション に も 、 そ れ ら と まっ た く 同 じ 機 
能 で 同じ 値 が 指定 で きる animation-delay プロ パテ ィ と animation-timing-function プロ パテ ィ が 用 
意 さ れ て いま す 。 


animation-delay に 指定 で きる 値 


・ 時 間 
アニ メー ショ ン を 開始 する まで の 時 間 を 単位 付き の 数 値 で 指定 し ます 。 単 位 に は 、「s ( 秒 )] と 
「ms (ミリ 秒 )」 が 指定 で きま す 。 


animation-timing-function に 指定 で きる 値 


*・ eaSse 
加速 を つけ て 、 ゆ っ くり と 始ま り 、 ゆ っ くり と 終わ り ま す 。 


・ease-1n 
ゆっ くり と 始ま り 、 一 定 速度 で 終わ り ま す 。 


・eaSe-0ut 
一 定 速 度 で 始ま り 、 ゆ っ くり と 終わ り ま す 。 


・ease-1n-OUt 
ゆっ くり と 始ま り 、 ゆ っ くり と 終わ り ま す 。 


・]inear 
最初 か ら 最 後 ま で 一 定 の 速度 で 変化 し ます 。 


アニ メー ショ ン に は 、 ト ラン ジ シ ョ ン に は な い 種 類 の プロ パテ ィ も 用 意 さ れ て いま す 。 そ れ は 、 繰 り 
返し に 関す る プロ パテ ィ で す 。animation-iteration-count プ ロ パ ティ は 、 ア ニメーション を 繰り 返 
す 回 数 を 指定 する プロ パテ ィ で 、 初 期 値 は 1 に な っ て いま す 。 値 と し て 「infinite」 を 指定 する と 、 
アニ メー ショ ン を 無限 に 繰り 返し ます 。 


再生 の 際 に 、 キ ー フ レー ム 通 り に 再生 する か 逆 再 生 す る か を 指定 で きる の が animation-direction プ 
ロ パ ティ で す 。 ア ニメーション を 繰り 返す 際 に は 、 キ ー フ レー ム 通 り の 再生 と 逆 再 生 を 順に 繰り 返し 
た り 、 そ の 送 を お こ な う こと も で きま す 。 初期 値 は 「normal] で 、 常 に キー フレ ー ム 通り に 再生 し 
ます 。 こ れ ら の プロ パテ ィ に 指定 で きる の は 、 次 の 値 で す 。 








animation-iteration-count に 指定 で きる 値 


・ 実数 
アニ メー ショ ン を 繰り 返す 回 数 を 指定 し ます 。 初 期 値 は 1 で す 。 


・infinite 
アニ メー ショ ン を 無限 に 繰り 返し ます 。 


animation-direction に 指定 で きる 値 


・normal 
常に キー フレ ー ム 通り に 再生 し ます 。 


・Teverse 
常に 逆 再生 し ます 。 


・alternate 
繰り 返し の 際 、 キー フレ ー ム 通り の 再生 と 逆 再 生 を 順に 繰り 返し ます 。 


・alternate-reverse 
繰り 返し の 際 、 逆 再生 と キー フレ ー ム 通り の 再生 を 順に 繰り 返し ます 。 


みゆ > アニ メー ショ ン 関 連 プ ロ パ ティ の 使用 例 


で は 、 こ れ ら の プロ パテ ィ を 使用 し た サン プル を 見 て み ま し ょ う 。 ソ ー ス コー ド は 次 の 通り で す 。 

transition-timing-function プロ パテ ィ の サン プル の アニ メー ショ ン 版 で で 、 サ ンプ ル を ブラ ウザ で 
表示 させ る と 、animation-delay プロ パテ ィ に よっ て 2 秒 後に アニ メー ショ ン が 開始 され ます (この 
サン プル は :hover で 実行 され る の で は な く img 要 素 に CSS が 適用 され る と 同時 に アニ メー ショ 
ン が 実行 され ます )。 ア ニメーション は ウィ ンド ウ を 閉じ る まで 繰り 返さ れ 、 繰 り 返 し の 際 は キー 
フレ ー ム 通り の 再生 と 逆 再 生 を 順に 繰り 返し ます 。 





HTML sample/chapter-11/lecture-11-3/02.html 


く div> 

< く img 1d="sample1" src="shark1.png" alt=" サメ の 写真 "> く <br> 
03 <jimg 1d="sample2" src="shark2.png" a]t=" サメ の 写真 "> く <br> 
04 <jimg 1d="sample3" src="shark3.png" a1t=" サメ の 写真 "> く <br> 
05 <jimg 1d="sample4" src="shark4.png" al]t=" サ メ の 写真 "> く br> 
06 <jimg id="sample5" src="shark5.png" alt=" サ メ の 写真 "> 
7 </d1iV> 


マヨ ユエ d ツ アロ) 
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CSS 


sample/chapter-11/lecture-11-3/02-timing-function.css 





01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 








19 
20 
21 
22 
23 
24 
る 5 
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html, body { height: 100%: } 
body { 
margin: 0: 
background: ur1(sea.jpg): 
-webk1it-background-size: CoOVer: 
-moz-background-s1ze: COVerz 
background-size: cover: 
@-webkit-keyframes shark { 
0% { -webkit-transform: translateX(0) } 
100% { -webkit-transform: translateX(500px) } 
|) 
img { 
width: 300px: 
height: 150px: 
-webkit-animation-name: shark: 
-webk1it-animation-duration: 25s: 
-webkit-animation-iteration-count: jinfinite: 
-webkit-animation-direction: alternate: 
-webkit-animation-delay: 25s: 
} 
#sample1 
#sample2 


-webkit-animation-timing-function: ease: } 


#sample4 


{ 
{ 

#sample3 { -webkit-animation-timing-function: ease-out: ] 
{ 

#sample5 { 


-webkit-animation-timing-function: 1ineari } 








アニ メー ショ ン 用 の 各種 プロ パテ ィ を 使用 し た サン プル 





この サン プル を ブラ ウザ で 表示 させ る と 、 何 も し な く て も 2 秒 


後に アニ メー ショ ン が 開始 され る 
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-webkit-animation-timing-function: ease-jini } 


-webkit-animation-timing-function: ease-in-out: } 








アニ メー ショ ン の 一 括 指 定 !csss ぁ l 


トラ ンジ ショ ン と 同様 に 、 ア ニメーション に も 値 を 一 括 指 定 で きる プロ パテ ィ が 用 意 さ れ て いま す 。 
アニ メー ショ ン 関 連 の 値 を 半角 スペ ー ス で 区 切っ て 指定 で きま す 。 トラ ンジ ショ ン の 場合 と 同様 、 時 
間 の 値 を 指定 し た 場合 は 1 つめ が animation-duration プロ パテ ィ と な り 、2 つ め が animation-delay 
プロ パテ ィ の 値 と な り ま す ( ト ラン ジ シ ョ ン 同 様 、 こ の 仕様 は 変更 され る 可能 性 が あり ます )。 
animation に 指定 で きる 値 


・animation-name の 値 
animation-name プロ パテ ィ に 指定 で きる 値 が 指定 で きま す 。 


・animation-duration の 値 
animation-duration プロ パテ ィ に 指定 で きる 値 が 指定 で きま す 。 


・animation-timing-function の 値 
animation-timing-function プロ パテ ィ に 指定 で きる 値 が 指定 で きま す 。 


・animation-1teration-count の 値 
animation-1teration-count プロ パテ ィ に 指定 で きる 値 が 指定 で きま す 。 


・animation-direction の 値 
animation-direction プロ パテ ィ に 指定 で きる 値 が 指定 で きま す 。 


・animation-delay の 値 
animation-delay プロパ ティ に 指定 で きる 値 が 指定 で きま す 。 


ぁ py animation プロ パテ ィ の 使用 例 


次 の サン プル は 、animation プロ パテ ィ を 使用 し た も の で す 。 ア ニメーション は 、 サ ンプ ル を ブラ 
ウザ で 開く と すぐ に 開始 され ます 。 





ヨ ュ yh 


HTML sample/chapter-11/lecture-11-3/03.html 








01 <div> 
02 <jimg src="shark.png" al1t=" サ メ の 写真 "> 
03 </div> 
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CSS 


sample/chapter-11/lecture-11-3/03-animation.cSs 





01 html, body { height: 100%: ] 


02 body { 
03 margin: 0: 
04 








background: ur1(sea.jp9): 


shark 10s infinite: 


translateX(500px) scale(0.2): 


translateX(500px) rotate(-90deg) scale(0.2): 


translate(500px, -500px) rotate(-90deg) 


translate(-500px, -500Px): 


translate(-500px): 


translate(-300px) scale(6.0): 


05 -webkit-background-size: COVer: 

06 -moz-background-S1ze: COVer: 

07 background-s1ze: COVeT: 

08 } 

09 1mg 【 

10 margin-top: 100px: 

11 width: 300pxi 

12 height: 150px: 

13 -webk1it-animation: 

14 } 

15 @-webkit-keyframes shark { 

16 0% { 

17 -webkit-transform: scale(1.0): 

18 ま 

19 20% [{ 

20 opacity: 0.6: 

21 -webk1t-transform: 

22 } 

23 21% { 

24 opacity: 0.5: 

25 -webkit-transform: 

26 } 

し 74 23% { 

28 opacity: 0.5: 

29 -webkit-transform: 
scale(0.2): 

30 } 

31 24% { 

32 -webk1it-transform: 

33 } 

34 25%【 

3 る -webkit-transform: 

36 ] 

37 98% [ 

38 -webk1t-transform: 

39 1} 

40 100% { 

41 -webkit-transform: scale(1.0): 

42 } 

43 ] 











animation プロ パテ ィ を 使用 し た サン プル 
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① や サン プル を ブラ ウザ で 開い た と き の 状 態 ② サ メ は まず 、 半 透明 で 小さ く な りな が ら 右 側 に 移動 する 








③⑬ 右 に 500 ピク セル 進む と 上 を 向き 、 画 面 上 部 へ と 一 旦 消え る 4④ 画 面 左側 か ら 徐 々 に あら われ る 








⑤ こ れ で アニ メー ショ ン の 終了 。 こ れ を 何 度 も 繰り 返す 
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この 章 で 制作 する サイ ト は 、 次 の よう な も の で す 。 意図 的 に 、 最 近 の 日 本 の サイ ト で は 比較 的 多い 


パタ ー ン の レイ アウ ト に し て いま す 。 あ くま で も サン プル と し て 制作 する ペー ジ で す の で 、 


ル で 汎用 的 な も の に 仕上 げ て あり ます 。 








S ら samplesite 


ALOGO MoE OF TrtS SE 


ホー ム お 知ら ちせ 苗 品 情報 


日 本 の サン ブル の 
リア ンス ル ノ ルン グ ムー ニコ 
目指 し ます 


サン ブル だ か ら こ その "カタ チ " が ある 


わか りや すい サン プル は どう ある べき な の か ? その 答え を 知っ て いる か ど これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン 
うか で サン ブル の 出 共 坪 え は 決ま っ て きま す 。 こ れ は サン プル の テキ スト で 【\) 

す 。 こ れ は サン ブル の テキ スト で す 。 こ れ は サン ブル の テキ スト で す 。 これ 
は サン プル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 


テキ スト で す 。 


一 胃 で わか る サン プル 





これ は サン ブル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 これ 
は サン ブル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 


サー ビス 会 社 林 本 


お 問い 合わ せ 


レス 


ジブ | 








最高 の サン プル を 驚き の プラ イス で ! 


プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サイ 
ド バ ー の テキ スト で す 。 


CM 「 サ ンプ ブル プ ルル ン ふ 」 メ イキ ング 公開 


これ は サン プル の テキ スト で す 。 こ れ は サン ブル の テキ スト で す 。 こ れ は サ 
ン ブ ル の テキ スト で す 。 これ は ほ サ ンプ ル の テキ スト で す 。 こ れ は サン プル の 


ブル の サイ ド バ パー の テキ スト で す 。 こ れ は サン プル の サイ 
ド バ ー の テキ スト で す 。 


見 えな い 部 分 へ の こだわ り 


これ は サン プル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 て これ 
は サン ブル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 


aoyrime 202 wae se 2 nn ray 


【>) これ は サン ブル の サイ ド バ ー の テキ スト で す 。 こ れ は サン 


これ は サン プル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 こ れ 
ほ は サン プル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 





これ か ら 作 成す る ペー ジ 
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この サン プル ペー ジ の 構造 を お お ま か に 図 に する と 、 次 の よう に な っ て いま す 。 


テキ スト や 画像 な どの 素材 は すでに 用 意 し て あり ます の で 、 さ っ そく HTML か ら 作り 込ん で いき ま 


計 ま よう 。 








div 要 素 
(#page) 


header 要素 


div 要素 
(#main) 


footer 要素 





ペー ジ 全 体 の 概 略 構造 





div 要素 
(#Sub) 
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| は じ め に 、 素 材 (テキ スト と 画像 ) を 入れ た 状態 の HTML を 確認 し ます 。 と 言っ て も 、 テ キス ト に 
は 見 出し (h 1 ・h2 要 素 ) と 段落 (p 要素 )、 リ スト (ul 要素 ) と いっ た 基本 的 な 意味 を あら わす タグ は 
つけ て あり ます 。 ま た 、 画 像 は img 要 素 と し て 組み 込ん で あり ます 。 


HTML sample/chapter-12/practice-12-2/01.html 





01 <!DOCTYPE htm1> 

02 <html 1ang="Ja"> 

03 <head> 

04 <meta charset="utf-8"> 

05 <t1t1e> 株 式 会 社 サ ンプ ル ・ サ イト </title> 
06 </head> 

07 <body> 


09 <1mg src="1mages/1ogo.png" alt=" 株 式 会 社 サ ンプ ブル ・ サ イト " 
width="220" height="44"> 

10 <ul> 

和 <]1><a href="#"> ホ ー ム く /a> く /11> 

12 <]1><a href="#"> お 知ら せく /a> く /11> 

13 <]1i><a href=" 夫 > 製品 情報 く </a></11> 

14 <]1><a href="#"> サー ビス く /a> く /11> 

15 <]1i><a href="##"> 会 社 概要 く /a> く /11> 

16 <]1i><a href="#"> お 問い 合わ せく /a> く /11> 

17 </u1> 

18 <1mqg src="1mages/mainvisua].jpg" al1t=" 日 本 の サン プル の リー ディ 
ング ・ カ ン パ ニー を 目指 し ます 。" width="900" height="350"> 











20 <h1> サ ンプ ル だ か ら こ その "カタチ" が ある く < く /h1> 

21 <p> わ か りや すい サン プル は どう ある べき な の か ? その <a href=" 夫 "> 答え 
く /a> を 知っ て いる か どう か で < く a href="#"> サ ンプ ル の 出来 映え く /a> は 決 
まっ て きま す 。 こ れ は サン ブル の テキ スト で す 。… 中 略 … これ は サン ブル の テ 
キス ト で す 。 

22 </Pp> 

23 <p> こ れ は サン ブル の テキ スト で す 。 … 中 略 … これ は サン プル の テキ スト で す 。 

24 </Pp> 


26 <h2> 最 高 の サ ンプ ル を 驚き の プラ イス で ! </h2> 

27 <p><1mg src="1mages/yen.png" width="45" height="45" 
a1t=""> 

28 これ は サン プル の サイ ド バ ー の テキ スト で す 。…- 中 略 … テキ スト で す 。 

29 </p> 
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ロコ 画像 


ナビ ゲー ショ ン 


メイ ン ビ ジュ アル 画像 


メイ ンコ ン テ ン ツ 


サイ ド バ パー 





30 
31 


32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 





く h2>CM 「 サ ンプ ルプ ルル ン | メイ キン グ 公 開く </h2> 





く p> く jmq src="1mages/play.png" width="45" height="45" 
a1t=""> 

これ は サン プル の サイ ド バ ー の テキ スト で す 。… 中 略 … テキ スト で す 。 
く /P> 

く h2> 一 瞬 で わか る サン ブル </h2> 










く P> 
これ は サン プル の フッ ター の テキ スト で す 。… 中 略 … テキ スト で す 。 

く /p> 

く h2> 見 えな い 部 分 へ の こだわ りく </h2> 

NM フッ ター コン テン ツ 
これ は サン プル の フッ ター の テキ スト で す 。… 中 略 … テキ スト で す 。 

</p> 

く <h2> 社会 活動 ・ 環 境 活動 く /h2> 

く P> 

これ は サン ブル の フッ ター の テキ スト で す 。 … 中 略 … 


く /p> 


く Pp> 
Copyright &copy: 2012 sample site. Al] rights reserved. トー 
く /p> 


</body> 
</html> 











日 本 の サン プル の 
に ジン メル シン スル トブ ムトー ピコ 


eeG6ts RC が 26809.EdES2 ジ ZacsEeee 


CM「 サ ンプ ブルブル ルン J」 メ イキ ング 公開 


HTML は 素材 の テキ スト と 画像 を 組み 込ん だ だ け の 状態 に な っ て いる 


参考 まで に 、 こ の 段階 で ブラ ウザ で 
表示 させ る と この よう に な っ て いる 


日 指し ます 
サン ブル だ か ら こ その "カタ チ " が ある 
わか りや すい サン プル は どう ある べき な の か 7 その 衝 た を 知っ て いる か どう か で サン プル の 式 え は 鞭 ま っ て きま すず 。 こ れ は サン プル の テキ スト で す 。 こ れ は サン プル の テキ | ワン ポイ ント 1 
スト で す 。 これ は サン プル の テキ スト で す 。 これ ほ サ ンプ ブル の テキ スト で す 。 これ は サン プル の テキ スト マリ 。 
こ か は サ ンプ ル の テキ スト で すず 。 こ れ は サン ブル の テキ スト で すず 。 こ れ は サン プル の デキ スト で す 。 こ れ は サン プル の デキ スト で す 。 こ れ は サン プル の テキ スト で す 。 この サン プル で は リン ク 先 の ペ 
最高 の サン プル を 敬 き の プラ イス で ! ー ジ は 用 意 し て あり ませ ん の 


で 、 リ ンク 先 の URL (ag 要素 の 
href 属 性 の 値 ) は すべ て 「# を 
入れ た だ け の 状態 に し て あり ま 


SHIGN2 が 75 き が AGE ERRS3284aZt す 。 
一 過 で わか る サン ブル 

may シブル の ファ ター の テキ スト で す 。 これ は タ ンプ ル の フッ ター の テキ スト で す 。 これ ビ ツン プル の フッ ター の テキ スト で す 。 これ ほ サン ブル の フッ ター の テキ スト で す 。 
見 えな い 部 分 へ の と だ わり 

Re ンプ ルフ ッ ター の テキ スト で す 。 これ は ッ ンプ ん の フッ ター の テキ スト で すこ かほ サン プ た の フッ ター の デキ スト で す 。 これ は ッ ン フ ル の フッ ター の チキ スト で 
社会 活動 ・ 東 活動 

hg タン プル の フッ ター の テキ スト で す 。 これ は ッ シズル の フッ ター テキ ネト で す 。 これ 5 サン プル の テッ ター の テキ スト で す 。 と かほ アン プル の フッ ター の テキ スト で ャ 。 
Copygex Oz age me Ange raw 
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2 


次 に 、 さ き ほ ど 「 ペ ー ジ 全体 の 概略 構造 ] と いう 図 で 示し た レイ アウ ト に する た め の タ グ を つけ ま 
す 。 各 部 分 を まとめ て 配置 で きる よう に する た め に 、div 要 素 や header 要 素 、footer 要 素 で グル ー 
プ 化 し ます 。 


HTML sample/chapter-12/practice-12-2/02.html 





01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 


13 
14 
15 
16 
17 
18 
19 
20 
21 


22 
23 
24 
25 
26 


27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 





く !DOCTYPE htm1> 

< く htm] 1ang="ja"> 

く head> 

く meta charset="utf-8"> 

く tit1e> 株 式 会 社 サ ンプ ル ・ サ イト く < く /title> 
く /head> 

く body> 


<div 1d="page"> 

























< く header> 
<1mg src="1mages/1ogo.png" alt=" 株式 会 社 サ ンプ ル ・ サ イト " width="220" 
height="44"> 
く ul1> 

<]1i><a href="#"> ホ ー ム く /a> く /11> 

く ]11><a href="#"> お 知ら せく /a> く </11> 

<]11><a href="#"> 製品 情報 く /a> く /11> 

<]11><a href="#"> サ ービス く < く /a> く /11> 

<11><a href="#"> 会 社 概要 く /a> く </11> 

く ]1> く <a href="#"> お 問い 合わ せく /a> く /11> 
く /u1> 
<img src="1mages/mainvisua] .jpg" a1t-" 日 本 の サン プル の リー ディ ング ・ カ ン パ ニー を 目 
指し ます 。" width="900" height="350"> 
く /header> 


<div 1d="ma1n"> 
く <h1> サ ンプ ブル だ か ら こ その "カタチ" が ある く </h1> 

く <p> わか りや すい サン プル は どう ある べき な の か ? その <a href="#"> 答 え く /a> を 知っ て いる 
か どう か で <a href="#"> サン プル の 出来 映え く /a> は 決ま っ て きま す 。 こ れ は サン プル の テキ ス 
ト で す 。… 中 略 … これ は サン プル の テキ スト で す 。 

く /p> 

く <p> これ は サン プル の テキ スト で す 。… 中 略 … これ は サン プル の テキ スト で す 。 
く /P> 

く /div> 





<div 1d="sub"> 
く <h2> 最高 の サン プル を 驚き の プラ イス で ! </h2> 

<p><1img src="1mages/yen.png" width="45" height="45" a1t=""> 
これ は サン プル の サイ ド バ ー の テキ スト で す 。… 中 略 … テキ スト で す 。 

く /P> 

く <h2>CM 「 サ ンプ ルプ ルル ン | メイ キン グ 公 開く </h2> 

く p> く img src="1mages/play.png" width="45" height="45" a1t=""> 
これ は サン プル の サイ ド バ ー の テキ スト で す 。… 中 略 … テキ スト で す 。 
く /p> 

く /div> 


く footer> 
く h2> 一 上 骨 で わか る サン プル く </h2> | 
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45 く P> 

46 これ は サン プル の フッ ター の テキ スト で す 。… 中 略 … テキ スト で す 。 
47 </p> 

48 < く h2> 見 えな い 部 分 へ の こだわ りく /h2> 


49 <p> 
50 これ は サン プル の フッ ター の テキ スト で す 。… 中 略 … テキ スト で す 。 

51 </p> 

52 <h2> 社会 活動 ・ 環 境 活動 く /h2> 

53 <p> 

54 これ は サン プル の フッ ター の テキ スト で す 。… 中 略 … テキ スト で す 。 

55 </p> 

56 <p> 

5 Copyright &copy: 2012 sample site. Al1] rights reserved. 
58 </p> 

59 </footer> 








61 </div> 


63 </body> 
64 </htm1> 


291 ペ ー ジ の 「 ペ ー ジ 全体 の 概 構 造 」 と いう 図示 し た レイ アウ ト に する た め に 必要 な 、 グ ルー ビング の た め の タ グ ( 赤 と 青 で 示 
し た タグ ) を つけ る 

















この 段階 で すでに HTML は 文法 的 に も 問題 な いも の と な っ て いま す が 、 せ っ か く で す の で HTML5 
か ら 新 し く 導 入 さ れ た セク ショ ン 関 連 の タグ (section 要素 ・aside 要素 ・nav 要 素 ) も つけ て み ま し 

ょ う 。HTML5 で 意味 の 変更 され た small 要素 も コピ ー ラ イト の 部 分 で 使っ て み ま す 。 

さら に 、 こ れ か ら 指 定 し て いく 「style.css] を 読み 込ま せる た め の link 要 素 を 追加 し 、 追 加 し た タ 

グ に 合わ せ て イン デン ト を 整え る と HTML の 完成 で す 。 最終 的 に HTML の ソー スコ ー ド は 、 次 の 

よう に な り ま す 。 


HTML sample/chapter-12/practice-12-2/03.html 
es ー 





01 <!DOCTYPE html> 

02 <html 1ang="Ja"> 

03 < く head> 

04 < く meta charset="utf-8"> 

05 く tit1e> 株式 会 社 サ ンプ ル ・ サ イト く </title> 

06 <]ink rel="stylesheet" href="styles.css"> 
07 < く /head> 

08 <body> 





10 <div 1d="page"> 
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11 
12 
13 


14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 


25 
26 
27 
28 
29 
30 


31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 





く header> 
く 1mg src="1mages/1ogo-png" alt=" 株 式 会 社 サ ンプ ル ・ サ イト " width="220" 
height="44"> 
く naV> 
く ul> 
く ]1><a href="#"> ホ ー ム く /a> く /11> 
く ]11i><a href="#"> お 知ら せく /a> く </11> 
<11i><a href="#"> 製品 情報 く /a> く </11> 
く 11><a href="#"> サ ービス く </a> く </11> 
<1i><a href="#"> 会 社 概要 く /a> く /11> 
く 11><a href="#"> お 問い 合わ せく /a> く </11> 
く /u1> 
く /naV> 
く 1mg src="1mages/mainv1sua]l .jpg" alt=" 日 本 の サン プル の リー ディ ング ・ カ ン パ ニー を 
目指 し ます 。" width="900" height="350"> 
く /header> 


<div 1d="ma1n"> 
く sectton> 
く <h1> サ ンプ ル だ か ら こ その "カタチ" が ある </h1> 
く <p> わか りや すい サン プル は どう ある べき な の か ? その <a href="#"> 答 え く /a> を 知っ て 
いる か どう か で <a href="#"> サ ンプ ル の 出来 映え く /a> は 決ま っ て きま す 。 こ れ は サン プル の テ 
キス ト で す 。… 中 略 … これ は サン プル の テキ スト で す 。 
く /P> 
く <p> これ は サン プル の テキ スト で す 。 … 中 略 … これ は サン プル の テキ スト で す 。 
</p> 
< く /section> 
く /d1iv> 


<div jid="sub"> 
く <aside> 
<section> 
く <h2> 最高 の サン プル を 駒 き の プラ イス で ! </h2> 
く p> く 1mg src="1mages/yen.png" width="45" height="45" al1t=""> 
これ は サン プル の サイ ド バ ー の テキ スト で す 。… 中 略 … テキ スト で す 。 
く /p> 
く /section> 
<sectfon> 
く <h2>CM 「 サ ンプ ルプ ルル ン 了 | メイ キン グ 公 開く </h2> 
く p> く jmg src="1mages/play.png" width="45" height="45" a1t=""> 
これ は サン プル の サイ ド バ ー の テキ スト で す 。… 中 略 … テキ スト で す 。 
く /P> 
く /section> 
く /aside> 
く /div> 


く footer> 
く aside> 
く section> 
く h2> 一瞬 で わか る サン プル </h2> 
く P> 
これ は サン プル の フッ ター の テキ スト で す 。… 中 略 … テキ スト で す 。 
く /p> 
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DO 
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76 
77 
78 
79 
80 
81 
82 
83 








く /section> ーー ニー 


く section> 
く h2> 見 えな い 部 分 へ の こだわ りく /h2> 
く P> 
これ は サン プル の フッ ター の テキ スト で す 。… 中 略 … 
く /p> 
く /section> 
く section> 
く h2> 社会 活動 ・ 環 境 活 動く /h2> 
く Pp> 
これ は サン プル の フッ ター の テキ スト で す 。… 中 略 … 
く /P> 
く /section> 
く /aside> 
<P> 
<smal1>Copyright &copy: 2012 sample site. Al] rights reserved.</small> 
く /P> 
く /footer> 













テキ スト で す 。 


テキ スト で す 。 


く /d1v> 


</body> 
く /html> 





完成 し た HTML の ソー スコ ー ド 














さて 、 こ こ か ら CSS を 指定 し て いき ます 。 それ に 先だって 、 ペ ー ジ 全体 の 初期 設定 と な る 、 ご 
基本 的 な 指定 を 先 に 組み 込ん で お きま し ょ う 。 簡単 に 言え ば 、 ペ ー ジ 全体 (body 要素 ) の 余白 、 フ 
ォ ン ト サ イ ズ 、 文 字 色 と 背 景色 、 行 間 の 設定 な どの 指定 で す 。 


どれ も 説明 の 必要 が な いく らい 基本 的 な も の ば か り で す が 、HTML5 から 追 加 さ れ た セク ショ ン 関 
連 要素 に 「display: block:] を 指定 し て いる 部 分 は 重要 で す 。 実 は 、HTML5 の 新 要素 に 未 
対応 の ブラ ウザ で は 、 こ の 指定 が な いと セク ショ ン 関 連 要 素 は イン ライ ン 要 素 の よう に 表示 され て 
し まう の で す (display プロ パテ ィ の 初期 値 は 「in]11ine] で ある た め )。 古い ブラ ウザ で 表示 が お 
か し く な っ て し まう こと を 避け る た め に 、 こ の 指定 は 忘れ ず に 書き 込ん で お いて くだ さい 。 


CSS sample/chapter-12/practice-12-3/01-styles.css 





01 @charset "utf-8": 


05 body { 

06 margin: 0: 

07 padding: 0: 

08 font-size: small: 
09 color: #333: 

10 。 background: #fff: 


} 
12 Eh 
13.。 GOHOPs 222: 
14 } 
15 h1 { 
16 font-size: x-large: 
| 
18 h2 { 
19 font-size: medium: 


] 
2 0 玉 
22 1ine-heiqht: 1.7: 
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1) 
a:link, aivisited { 
color: #37c: 
} 
aihover { 
color: #999: 
] 
section, article, aside, nav, header, footer, hgroup [ 
display: block: ト ドラ ショ ン 0 に 
} 対す る 指定 
/* ペー ジ の 枠組 み 
ーー ニー ニー ニーーー ニ ーーーー ニ ーー ニー ニーーーー ニ ーー ニー ニー ニー ニーーー ニ ーー ニー ニー ニー ニーー ニ ーー ニー ニー ニー ニーー ニ ーー ニー ニー ニーーー */ 
/* ヘッ ダ 
ニニ ーーー ニー ニー ニー ニニ ニニ ニニ ーー ニニ ニー ニニ ニニ ーーー ニー ニニ ニニ ニニ ーー ニニ ーー ニー ニー ニー ニニ ニニ ーー ニー */ 
/* ナビ ゲー ショ ン 
ーーーーーーー ニ ーーーー ニ ーーーーー ニ ーーー ニ ーーーー ニ ーーーーーー ニ ーーー ニ ーーーー ニ ーー ニー ニーーー ニ ーー ニー ニー ニー ニーー ニ ーー */ 
/* サイ ド バ ー 
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ニ ーーーー */ 
/ や ブタ 
ーーー ニニ ニニ ニニ ニニ ニ ニニ ニニ ニー ニニ ーー ニニ ーー ニー ニー ニニ ーー ニー ニー ニー ニニ ニー ニー ニー ニー ニー ニニ ーー ニー ニー */ 








この 段階 で の 「styles.css」 の ソー スコ ー ド 。 初 期 設定 と な る ソー スコ ー ド の ほか に 、 こ れ 以降 に 入力 する ソー スコ ー ド の 見 出し と 
な る コメ ント も 入れ て ある 


続け て 、 ペ ー ジ 全体 の 枠組 み を 設定 し ます 。 こ こ で まず コン テン ツ 全 体 の 幅 を 決め て 、 そ れ を 中 央 
寄せ に し て 配置 し 、 メ イン コン テン ツ と サイ ド バ ー を 横 に 並べ 、 フ ッ タ ー の 内 部 に ある 3 段 組 み も 
済ま せま す 。 そ れ ら の 枠組 み の 中 身 に つい て は 、 こ の あと に 順番 に 指定 し て いき ます 。 


まず 、body 要素 内 の すべ て の 要素 が 
入っ て いる #page の 幅 を 900 ピ クセ ル 
に し ます 。 こ れ で コン テン ツ 全 体 の 幅 
が 900 ピ クセ ル に 制限 され ます 。 
#page の 左右 の マー ジン を 「auto] auto 
に する と 、 左 右 の マー ジン は 同じ 距離 
と な る の で セン タリ ング され ます 。 





幅 900px 


右 マ ー ジ ン 
guto 


F- ネ = レ よー 

















コン テン ツ 全 体 の 幅 は 900 ピ クセ ル に 設定 。 左 右 の マー ジン を 「auto 
に し て 中 央 寄せ で 表示 させ る 
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次 に 、 メ イン コン テン ツ (main) と サイ ド バ ー (#sub) の 幅 を それ ぞ れ 450 ピ クセ ル (900 ピクセル 

の 半分 ) に し ます 。 そ し て 、#main に は 「f1oat: 1eft:]、#Sub に は 「f]1oat: right:] を 
指定 し ます 。 こ れ で #ma1n と #sub は 横 に 並び ます 。 こ れ ら の 下 に ある footer で これ ら の フロ 
ー ト は クリ ア し て お きま す 。 





#main#sub の 幅 を 450 ビ ピク セル に 設定 し 、 
float で 左右 に 振り 分 け て 横 に 並べ る 








#「TaIn 


ズーーー float lef 











フッ ター 内 の section 要素 に つい て は 、 そ れ ぞ れ の 幅 を 280 ピ クセ ル に 設定 し 、 すべて に 「f1oat: 
1eft:」 を 指定 し て 横 に 並べ ます 。 フ ロー ト は 、 そ の 下 に ある コピ ー ラ イト の テキ スト で クリ ア し 


て お きま す 。 





フッ ター 内 の section も フロ ー ト で 横 に 並べ 、 
その 下 の コ ピー ライ ト の テキ スト で クリ ア す る 
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= 


CSS 


凌 これ ら を 指定 し た CSS の ソー スコ ー ド は 、 次 の 通り で す 。 


sample/chapter-12/practice-12-3/02-styles.css (HTML フ ァイル は 02.html) 





01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
7 
33 
34 





/* ペー ジ の 枠組 み 


#page { 
marq1n: 0 aut0: 
width: 900px: 
} 
#ma1n { 
float: left: 
width: 450px: 
] 
#sub { 
float: right: 
width: 450px: 
] 
footer { 
clear: both: 
} 
footer section { 
float: ]eft: 
width: 280px: 
1 


footer section:nth-chil1d(2) { 
margin: 0 30Dx: ー フッ ター 内 の 真ん中 の セク ショ ン に だ け 左 右 に 30px の 
} マー ジン を 指定 


#copyright { 
clear: both: 





ペー ジ 全 体 の 枠組 み を 指定 し て いる CSS の ソー スコ ー ド (追加 し た 部 分 だ け 抜 粋 ) 

















の 
* 
| 
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フッ ター 内 の セク ショ ン に つい て は 、3 つ の 段 が 280 ピクセル だ と 、 合 計 は 840 ピ クセ ル で 、 幅 に 
60 ピ クセ ル の 余裕 が あり ます 。 その 幅 は 各 セ クシ ョ ン 間 の 余白 と し て 、 真 ん 中 の セク ショ ン の 左 
右 に 30 ピ クセ ル ず つの マー ジン と し て 指定 し ます (セレ クタ に nth-chi1d(2) を 使っ て いる 部 
分 )。 


この 指定 は 、 セ レク タ に nth-chi1d( ) を 使っ て いる た め 、Internet Explorer 8 以前 に は 適用 さ 
れ ま せん 。 それら に も 対応 させ る に は 、nth-ch11d( ) を 使用 せ ず に 、 真 ん 中 の セク ショ ン だ け に 
id 属性 また は class 属性 を 指定 し 、 そ れ を セレ クタ で 指定 する 必要 が あり ます 。 具 体 的 な 方 法 に つ 
いて は 、 こ の あと の 「Practice 12-6 IE6 対 応 へ の ヒン ト (p.314)」 を 参照 し て くだ さい 。 


この 段階 で ブラ ウザ で 表示 させ る と 、 次 の よう に な っ て いま す 。 ま だ ペー ジ 全 体 の 初期 設定 と 大 枠 
の 指定 し か し て いな い の で お か し な 部 分 は 多く あり ます が 、 そ れ な り の 究 囲 気 は 出 て きま し た 。 








samplesite 


ALOoo WAoE OF TS SrTE 


PS 


目 本 の サン プル の 
リン アン ル ルリ ルン プ ム や コー ニキ ンコ 


Ei の を 』 





サン プル だ か ら こ その “カタチ "が ある 生 フイ ンプ ル 生 講 寺 の ブラ イス で ! 


わか りや すい サン プル は どう ある べき な の か ? その 等 え を 知っ て いる か ど 【\】 これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サ 
うか で サン プル の 出 基 医 え は 決ま っ て きま す 。 こ れ は サン ブル の テキ スト で ド バ ー の テキ スト で す 。 こ れ は サン プル の サイ ド バ ー の テキ スト で す 。 


す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サン ブル の テキ スト で す 。 こ れ 
は サン プル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 CM「 サ ンプ ブル プル ルン ゅ 』 メ イキ ング 公開 


これ は サン ブル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サ 
ンプ ル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サン プル の これ は サン プル の サイ ド パ バー の デキ スト で す 。 こ れ は サン プル の サ 
テキ スト で す 。 イド バー の デキ スト で す 。 こ れ は サン プル の サイ ド バ ー の テキ スト で す 。 





一 通 で わか る サン プル 


これ は サン ブル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 こ れ 
は サン ブル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 


Copyright = 2012 samle st Alnonts reeerven 


見 えな い 部 分 へ の こだわ り 


これ は サン プル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 これ 
ほ サ ンプ ル の フッ ター の デキ スト で す 。 こ れ は 
サン プル の ファ ター の テキ スト で す 。 


これ は サン ブル の フッ ター の テキ スト で す 。 こ 
れ は サン ブル の フッ ター の テキ スト で す 。 こ れ 
は サン プル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 





CgAPTe ょ を 「2 ペー ジ を まる ご と 作っ て みよ う 


この 時 点 で の ソー スコ ー ド を ブラ ウザ で 表示 させ た と ころ 





ロ 


半生 


店 MS 


ナビ ゲー ショ ン と ヘッ ター 


ナビ ゲー ショ ン を 整え て 行き ます 。 今 は 箇条 書き の 状態 に な っ て いる ナビ ゲー ショ ン の 項目 を 、 
横 に 並べ 、 メ ニュ ー ら し い 見 た 目 に 整え ます 。 ま た 、 口 ゴ 画 像 の 表示 も 整え て ヘッ ダー 領域 を 
完成 させ ます 。 


次 は ヘッ ダー の 中 に ある ナビ ゲー ショ ン を 作成 し ます 。 ナ ビ ゲ ー シ ョ ン は 、 一 般 的 な ペー ジ の 中 で 
は 制作 に も っ と も 手間 の か か る 部 分 で も あり ます 。 た だ し 、 こ の 部 分 が 出来 上 が る と 、Web ペ ー 
ジ ら し さ が ぐ っ と 増し て きま す 。 


まず は ナビ ゲー ショ ン の 現在 の 状態 を 確認 し て お きま し ょ う 。 まだ この 部 分 に は CSS を 一 切 し て 
いま せん 。HTML は 、ul 要 素 の 各 項 目 が リン ク に な っ て いる だ け の シン プル な も の で す 。 


HTML 


ホー ム 

お 知ら せ 
製品 情報 
サー ビス 
会 社 概要 

お 問い 合わ せ 


ナビ ゲー ショ ン 部 分 の HTML の ソー スコ ー ド 





EE 1 CSS を 指定 する 前 の 段階 の ナビ ゲー ショ ン 
6 株式 会 社 サン プル ・ サ イト 


と っ で C 〇 
に つ samplesite 


ALOGO IMAGE OF THIS SITE 





* ボー ム 





display プロ パテ ィ ………… p.208 へ 
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は じ め に 、 一 般 的 な リス ト の 表示 形式 を 、 ブ ロッ クレ ベル 要素 が 横 に 並ん で いる 状態 に し ます 。 次 
の 赤 で 示し た 指定 を 追加 し て くだ さい 。 中 要素 と a 要 素 の 両方 に 「display: block:」 を 指定 し 
て いま す が 、 こ れ に よっ て 要素 は ブロ ッ ク レ ベル の 表示 に な っ て 行頭 記号 が 消え 、a 要 素 は 幅 と 
高 さ が 指定 で きる よう に な り ま す ( イ ン ラ イン 要素 の テキ スト に は 幅 も 高 さも 指定 で きま せん )。 


2 


CSS 





03 / ポ ナビ ゲー ジョ シン 


05 nav 11i, nav a { 
06 display: block: 
07 } 

08 nav 11 { 

09 float: left: 
10 1 


12 /* サイ ド バ ー 














samplesite 


ALOGO IMAGE OF THIS SITE 








この 段階 で の ナビ ゲー ショ ン の 表示 


続け て 、 横 に 並ん だ 各 項 目 が ナビ ゲー ショ ン ら し く 見 える よう に 形 を 整え ます 。 こ こ で 追加 する の 
う は 、 次 の ソー スコ ー ド の 赤 で 示し た 部 分 で す 。 最 初 に ul 要素 に 「overflow: hidden:| を 指定 
し て いる の は 、 高 さ が 0 の 状態 か ら 、 フ ロー ト し て いる すべ て の li 要素 を 含む よう に 高 さ を 拡 張 す 
る た めで す ( こ こ で は clearfix を 使用 せ ず に overflow プロ パテ ィ を 使用 し て いる と いう こと で す )。 
そし て 、 マ ー ジ ン と パ デ ィ ン グ を 調整 し て 、 ナ ビ ゲ ー シ ョ ン と その 下 の 画 像 と の 間隔 を 10 ピ クセ 
ル に し て いま す 。 さ ら に 、 全 体 を グレ ー の ボー ダー で 囲い 、 行 間 を フォ ント サイ ズ と 同じ に し て 、 


CaAPTe ょ !2 ペー ジ を まる ご と 作っ て みよ う 


薄い グレ ー の グラ デー ショ ン の 背景 画像 を 表示 させ て いま すず *"%。 


要素 に は 、 右 側 に グレ ー の ボー ダー を 指定 し て 、 各 項目 の 区 切る 線 と し て 表示 させ ます 。 そ し て 、 
a 要 素 に パ デ ィ ン グ を 指定 し て 余白 を 広く する と 、 ナ ビ ゲ ー シ ョ ン ら し い 表 示 に 変わ り ます 。 


CSS 


01 1 

02 

03 /* チゲ ーション シ 

04 -=- ニ ーーーーーーー ニ ーーー ニー ニニ ーー ニー ニー ニニ ニー ニー ニー ニニ ニー ニー ニニ = ニー ニニ ニニ ニニ ニニ ニー ニーー / 
05 nav ul { 

06 overflow: hidden: 

07 margin: 0 0 10px 0: 

08 padding: 0: 

09 border: 1px so]lid #ddd: 

10 1fne-height: 1.0: 

11 background: ur1(1mages/]i-bg.jpg) repeat-x bottom: 
還 党 < 

13 nav 11。nav a { 

14 display: block: 

遇 訂 

16 nav 11 { 

17 fl1oat: left: 

18 border-right: 1px solid #ddd: 

19 + 

20 nava【[ 

21 padding: 15px 25px: 

22 1 

23 

24 /* サイ ド バ ー 

語 。 ニニ ニニ = ご こ = ニ ーー ピー ニニ ニニ ニニ マンマ こ ニニ ニニ ニコ ニー ピコ ピー ここ ニニ ニニ ーー ニニ ニニ ュ 7 
26 

の 7 ちい * 











余白 、 背 景 、 ボ ポー ダー な ど を 指定 し て ナビ ゲー ショ ン ら し くす る 





GO) 性 式 会 を サ ンプ ル ・ サ イト ※ 





< ら samplesite 


ALOGO MAGE OF THIS SITE 


ホー ム お 知ら せ 製品 情報 ” サー ビス 会 社 鶴 要 ” お 問い 合わ せ 


この 段階 で の ナビ ゲー ショ ン の 表示 











※16 : グラ デー ショ ン は CSS3 に も 含ま れ て お り 、 画 像 を 使わ な く て も CSS で 指定 する こと が 可能 で す 。 た だ し 、 グ ラ デ ー シ ョ ン 
は 大 き な 仕 様 変 更 が 何 度 も お こ な わ れ て お り 、 そ の 安定 性 や 互換 性 の 面 か ら あ えて 画像 を 使用 し て いま す 。 
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さら に 細か い 指 定 を 追加 し て 、 ナ ビ ゲ ー シ ョ ン 部 分 を 完成 させ ます 。 ま ず 、 ナ ビ ゲ ー シ ョ ン の 最初 

の 項目 (現在 表示 し て いる ペー ジ の 項目 ) の 表示 を 変え る た め に 、 現 在 表 示し て いる ペー ジ の li 要素 
に は 「id="current"] を つけ る こと に し ます (次 の CSS の ソー スコ ー ド の 最後 で 文字 色 と 背景 
色 を 指定 し て いま す )。 


ul 要素 に は border-radius プロ パテ ィ を 指定 し て 角 を 丸く し ます 。 そし て 、 左 上 の 内 側 に 白い 影 、 
右 下 の 外側 に 半 透 明 の 黒い 影 を 表示 させ ます 。a 要 素 の 文字 を 太字 に し て 下線 を 消し 、 右 下 に 白い 
影 を 表示 させ て 文字 が へ こん で いる よう な 効果 を 出し ます 。: hover の 指定 を 加え て 、 カ ー ソ ル が 
の っ た と き に 背景 が 少し 薄く な る よう に 別 の 背景 画像 を 指定 する と ナビ ゲー ショ ン の 完成 で す 。 














HTML 
01 「 生 kU 認 2 
02 <naV> 
03 <ul> 
04 く 11 id="current"><a href="#"> ホーム く /a> く </11> 
05 < く ]1><a href="#"> お 知ら せく /a> く /11> 
06 <]11><a href="#"> 製品 情報 く /a> く </11> 
07 <11i><a href="#"> サー ビス </a> く </11> 
08 <1i><a href="#"> 会 社 概要 く /a> く /11> | 
09 <]11><a href="#"> お 問い 合わ せく /a> く /11> | 
10 く /ul> 
11 </nav> 
12 ei 
CSS 
01 本 し ノ 
02 
03| / な ナビ ゲニ ーション 
人 | こち こい ここ ここ コニー の ユー マヨ ニコ ラジ コマ ニニ ここ ココ cm マコ ママ aaiea ョ ーー ミー */ 
05 nav ul { 


06 overflow: hidden: 

07 margin: 0 0 10px 0: 

08 padding: 0: 

09 border: 1px solid #ddd: 

10 -webkit-border-rad1us: 7DX: 

11 -moz-border-radius: 7DX: 

12 border-radius: 7DX: 

13 -webkit-box-shadow: 1px 1px 0 #fff jnset, 1px 1px 3px rgba(0, 0, 0, 0.1): 
14 -moz-box-shadow: 1px 1px 0 #fff inset, 1px 1px 3px rgba(0, 0, 0, 0.1): 
15 box-shadow: inset 1px 1px 0 #fff。 1px 1px 3px rgba(0, 0, 0, 0.1): 

16 1ine-height: 1.0: 

17 background: ur1(1mages/11-bg.jpg) repeat-x bottom: 

18 } 

19 nav 11,nav a 

20 display: block: 

ro 計 

22 nav 11 { 
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23 float: left: 

24 border-right: 1px solid #ddd: 
25 } 

26 nav a { 

27 padding: 15px 25px: 

28 font-weight: bold: 

29 text-decoration: none: 

30 text-shadow: 1px 1px 0 #fff: 
33 耳 

32 nav aihover { 

33 background: ur1(images/11-bg-hover.jpg) repeat-x bottom: 
34 1 

35 nav #current a [ 

36 color: #333: 

37 background: #fff: 

38 } 


40 /* サイ ド バ パー 




















(6) 株式 会 社 サ ンプ ル ・ サ イト 
に 時 
こら samplesite 


ALOGO IMAGE OF THIS SITE 





ナビ ゲー ショ ン が 完成 し た 


志 時 ナビ ゲー ショ ン は 完成 し た も の の 、 そ の 上 に ある ロゴ 画像 は ちょ っ と 窮屈 な 感じ の まま で す 。 こ の 
部 分 の 表示 を 整え て ヘッ ダー 領域 を 完成 させ まし ょ う 。 


ヘッ ダー 領域 内 に は ロゴ 画像 と メイ ン ビ ジュ アル 画像 の 2 つが 入っ て いま す が 、 そ れ ら は 何 も 指 定 
し な けれ ば イン ライ ン の 状態 で 、 画 像 の 下 に 隙間 が で きる な ど 取 り 扱 い が 面倒 で す 。 そ こ で 、 ヘ ッ 
ダー 領域 内 の 画像 に 「disp1ay: block:」 を 指定 し て 、 両 方 の 画像 を ブロ ッ ク レ ベル に 変更 し 
ます 。 こ うす る こと で 画像 の 下 の 隙 間 も 消 えま す 。 














本 来 、2 つ の img 要素 が あっ て 、 そ の 1 つめ に 対し て 何 か を 指定 する に は 、:nth-of-type() な 
どの セレ クタ を 使え ば いい の で す が 、 そ れ を 使う と Internet Explorer 8 以前 に は 指定 が 効か な いこ 
と に な っ て し まい ます 。 そ こ で 、 こ こ で は 最初 の 画像 に 「1d="1ogo"」 を 追加 し 、 そ れ に 対し て 
上 下 に 20 ピ クセ ル ず つの マー ジン を 指定 し て いま す 。 こ れ で 、 ヘ ッ ダ ー 部 分 の 指定 が すべ て 完了 
し まし た 。 





HTML sample/chapter-12/practice-12-4/index.html 





01 PCE 

02 

03 <div 1d="page"> 

04 

05 く <header> 

06 <1mg id="1ogo" src="1mages/]ogo.png" alt=" 株式 会 社 サ ンプ ル ・ サ イト " 
width="220" height="44"> 


07 。 <nav> 

08 く u1> 

09 く <11 id="current"><a href="#"> ホ ー ム く /a> く /11> 
10 <11><a href="#"> お 知ら せく /a> く </11> 

Mi 【 KK 」 





CSS sample/chapter-12/practice-12-4/styles.css 





05 header img { 

06 display: block: 
07 } 

08 者 ogo { 

09 margin: 20px 0: 
10 } 


12 か が パー ジョ ッ 























S ら samplesite 


ALOGO IMAGE OF THIS SHTE 





ロゴ 画像 の 上 下 に 余白 が 出来 た 


を まる ご と 作っ て みよ う 


さて 、 あ と は サイ ド バ ー と フッ ター の 指定 が 完了 する と 、 サ ンプ ル ペ ー ジ は 完成 で す 。 ま ず は 現在 





の サイ ド バ ー と フッ ター の 状態 を 確認 し て お きま し ょ う 。 











HTML 

01 gz (WM 

02 

03 <div 1d="sub"> 

04 く as1ide> 

05 < く section> 

06 <h2> 最高 の サン プル を 区 き の プラ イス で ! </h2> 

07 く p><1mg src="images/yen.png" width="45" he1ght="45" 
a1t=""> 

08 これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サイ ド バ ー の 
テキ スト で す 。 こ れ は サン プル の サイ ド バ ー の テキ スト で す 。 

09 く /p> 

10 く /section> 。 

11 く <section> 07 

12 <h2>CM「 サ ンプ ルプ ルル ン )」 メイ キン グ 公 開く </h2> 

3 <p>< く img src="1mages/play.png" width="45" he1ght="45" 
a1t=""> 

14 これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サイ ド バ ー の 
テキ スト で す 。 こ れ は サン プル の サイ ド バ ー の テキ スト で す 。 

15 く /p> 

16 </section> 

17 </as1ide> 

18 </div> 

19 

20 <footer> 

届 く as1de> 

22 < く section> 

23 <h2> 一 上 通 で わか る サン プル </h2> 

24 く Pp> 

25 これ は サン プル の フッ ター の テキ スト で す 。 こ れ は サン プル の フッ ター の テキ 
スト で す 。 こ れ は サン プル の フッ ター の テキ スト で す 。 こ れ は サン プル の フッ タ 
ー の テキ スト で す 。 

26 く /P> 

27 く /section> 

28 く section> 














29 
30 
31 


32 
33 
34 
ド 上 1 
36 
37 


38 
39 
40 
41 
42 


43 
44 
45 
46 


<h2> 見 えな い 部 分 へ の こだわ り </h2> 


<p> 





これ は サン プル の フッ ター の テキ スト で す 。 こ れ は サン プル の フッ ター の テキ 


スト で す 。 こ れ は サン プル の フッ ター の テキ スト で す 。 こ れ は サン ブル の フッ タ 


ー の テキ スト で す 。 
く /P> 

く /sect1on> 

<section> 


<h2> 社会 活動 ・ 環 境 活動 </h2> 


く P> 


7. 須 一 


これ は サン プル の フッ ター の テキ スト で す 。 こ れ は サン プル の フッ ター の テキ 
スト で す 。 こ れ は サン プル の フッ ター の テキ スト で す 。 こ れ は サン プル の フッ タ 


ー の テキ スト で す 。 
く /P> 
く /section> 
く /aside> 
く p> 


<smal]l>Copyright &copy: 2012 sample site. All rights 


reserved. く /small> 
</P> 
</footer> 








サイ ド バ ー と フッ ター 部 分 の HTML の ソー スコ ー ド 





サン プル だ か ら こ その “カタチ "が ある 


わか りや すい サン プル は どう ある べき な の か ? その 答え を 知っ て いる か ど 半 
うか で サン ブル の 出来 南 え は 決ま っ て きま す 。 こ れ は サン ブル の テキ スト で イド バー の テキ スト で す 。 こ れ は サン プル の サイ ド バ ー の テキ スト で す 。 
す 。 こ れ は サン ブル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ 
は サン プル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 


これ は サン プル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サ 
ンプ ブル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サン ブル の 


テキ スト で す 。 


一 通 で わか る サン プル 


これ は サン ブル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 こ れ 


は サン ブル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 


| Copyright < 2012 sample site. Al rights reserved 


見 えな い 部 分 へ の こだわ り 


これ は サン プル の フッ ター の テキ スト で す 。 こ ご 
れ は サン ブル の フッ ター の テキ スト で す 。 こ れ 
は サン プル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 


の サン ブル を 荻 き の プラ イス で ! 






これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サ 


IM 「 サ ンプ ルプ ブル ルン ょ 」 メ イキ ング 公開 


これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サ 
イド バー の テキ スト で す 。 こ れ は サン ブル の サイ ド バ ー の テキ スト で す 。 


これ は サン プル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 こ れ 
は サン ブル の フッ ター の テキ スト で す 。 こ れ は 
サン プル の フッ ター の テキ スト で す 。 








この 時 点 で の サイ ド バ ー と フッ ター の 状態 














サイ ド バ ー は 、 そ の 全体 の 背景 を グレ ー に する た め に 、#sub 内 の aside 要素 に 背景 色 を 指定 し ます 。 
は じ め に 余白 を 調整 し て グレ ー の ボー ダー を 表示 させ 、 角 丸 に し 、 薄い グレ ー の 背景 を 指定 し ます 。 
そし て 、 ボ ックス の 左上 内 側 に 白い 影 、 右 下 外側 に 半 透 明 の 黒い 影 を 表示 させ ます 。 そ し て text- 
shadow プロ パテ ィ で 文字 の 右 下 に 白い 影 を 表示 させ て 文字 が へ こん で いる よう な 効果 を 出し ます 
(この あたり の 指定 は ナビ ゲー ショ ン 部 分 と 同様 で す )。 


サイ ド バ ー に は 2 つの 画像 の アイ コン が あり ます が 、 こ れ ら の 横 に テキ スト が 回 り 込む よう に 、 画 
像 に は 「f1oat: 1eft:] を 指定 し ます 。 念 の た め 、 サ イド バー 内 の 見 出し (h2 要素 ) で フロ ー ト 
を クリ ア し て お き 、 見 出し と 画像 の 余白 を 調整 する と サイ ド バ ー は 完成 で す 。 


CSS 





05 #sub aside { 

06 margin: 20px 0 20px 20Dpx: 

07 padding: 15px: 

08 border: 1px solid #ddd: 

09 -webkit-border-radius: 7DX: 

10 -mOZ-border-radius: 7DX: 

11 border-radius: 7Dx: 

12 background-color: #f5f5f5: 

13 -webkit-box-shadow: 1px 1px 0 #fff inset,。 1px 1px 3px rgba(0, 0, 0, 0.1): 
14 -moz-box-shadow: 1px 1px 0 #fff jnset, 1px 1px 3px rgba(0, 0. 0, 0.1): 
15 box-shadow: inset 1px 1px 0 #fff, 1px 1px 3px rgba(0, 0, 0, 0.1): 
16 text-shadow: 1px 1px 0 #ff 和 f: 

人 

18 #sub h2 { 

19 clear: both: 

20 margin-top: 0: 

r4 価 し 

22 #sub img { 

23 float: left: 

24 margin: 0.4em 7px 0 0: 

@5. 1 


ge 7 の 
2 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ォ / 











サイ ド バ ー に 指定 する CSS の ソー スコ ー ド 





日 本 の ザン ジノ フル の 


り 吉 ディ ング ・ カ ン パ ニー を 


Ei の を 』 


サン プル だ か ら こ その “カタ チ " が ある 


わか りや すい サン プル は どう ある べき な の か ? その 答え を 知っ て いる か ど 
うか で サン プル の 出来 映え は 決ま っ て きま す 。 こ れ は サン プル の テキ スト で 
す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サン ブル の テキ スト で す 。 こ れ 
は サン プル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 


これ は サン プル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サ 
ン ブ ル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サン プル の 


テキ スト で す 。 


一 通 で わか る サン ブル 


これ は サン ブル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 こ れ 
は サン プル の フッ ター の テキ スト で す 。 こ れ は 
サン プル の フッ ター の テキ スト で す 。 





最高 の サン ブル を 驚き の プラ イス で ! 


これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン 
プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サイ 
ド バ ー の テキ スト で す 。 


CM「 サ ンプ ブルブル ルン 」 メ イキ ング 公開 


プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サイ 
ド バ ー の テキ スト で す 。 


見 えな い 部 分 へ の こだわ り 


これ は サン プル の フッ ター の テキ スト で す 。 こ 
れ は サン ブル の フッ ター の テキ スト で す 。 こ れ 
は サン プル の フッ ター の テキ スト で す 。 こ れ は 
サン プル の フッ ター の テキ スト で す 。 


の ら これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ ほ サン 





社会 活動 ・ 環 境 活動 


これ は サン ブル の フッ ター の テキ スト で す 。 こ 
れ は サン ブル の フッ ター の テキ スト で す 。 こ れ 
は サン ブル の フッ ター の テキ スト で す 。 こ れ ほ は 
サン ブル の フッ ター の テキ スト で す 。 














CSS 指 定 後 の サ イド バー の 表示 


フッ ター 領域 の 上 に は 横線 を 表示 させ ます 。 フッター 領域 全体 を 囲っ て いる の は footer 要 素 で す 
の で 、footer 要素 の 上 の ボー ダー を 表示 させ ます 。 


次 に 、 ペ ー ジ 一 番 下 の コピ ー ラ イト 表記 の テキ スト を 調整 し ます 。 コ ピー ライ ト 表 記 は p 要 素 の 中 
に 入れ られ て いま す が 、 フ ッ タ ー 内 に は 全部 で 4 つの p 要 素 が 入っ て いま す 。CSS3 で は 、 そ の う 
ちの 最後 の p 要 素 を 指定 する た め の セ レク タ も 用 意 さ れ て いま す が 、 こ こ で は 古い ブラ ウザ で も 問 
題 な く 表 示 で きる よう に 、 コ ピー ライ ト の 段落 に 「1d="copyright"」 を 追加 し て 、 セ レク タ で 
は それ を 対象 に する こと に し ます 。#copyr1ight の 上 の 余白 を 調整 し 、 中 央 揃え に し て 、 文 字 色 
を グレ ー に する と サン プル ペー ジ の 完成 で す 。 








HTML sample/chapter-12/practice-12-5/index.html 

01 ・・・ 

02 く p 1d="copyright"> 

03 <smal1>Copyright &copy: 2012 sample site. All rights reserved.</ 
Small> 

04 </p> 

05 </footer> 

06 

07 LORD ) 











る の 


CaAPTE ょ を 「2 ペー ジ を まる ご と 作っ て みよ う 





CSS sample/chapter-12/practice-12-5/styles.css 





01 ・・・ 
02 
03 /* フッ ター 


05 footer { 
07 } 


08 #copyright [ 


11 Color: #999: 
1 光 





09 padding-top: 20Ppx: 
10 text-align: center: 


06 border-top: 1pX so11id #Ccc: 


04 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ォ / 














フッ ター に 指定 する CSS の ソー スコ ー ド 


2 グルリ 不 と 2 アダ スグ) 
リン アン ンス ルル / ル ング ムー ニキ 


Ei の の: を 中 





サン プル だ か ら こ その “カタチ "が ある 


うか で サン ブル の 出来 内 え は 決ま っ て きま す 。 こ れ は サン プル の テキ スト で 


最高 の サン プル を 業 き の プラ イス で ! 


プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン ブル の サイ 


わか りや すい サン ブル は どう ある べき な の か ? その 箋 え を 知っ て いる か ど 【\) これ は サン プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン 


す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ 


は サン ブル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 


ド バ ー の テキ スト で す 。 


CM「 サ ンプ ブル プル ルン ゅ 」 メ イキ ング 公開 


これ は サン ブル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サ の の 
ンプ ル の テキ スト で す 。 こ れ は サン プル の テキ スト で す 。 こ れ は サン プル の ② ら られ は サン の か JR 人 2 こ 2 ま Kb で Wi どれ 陸送 


テキ スト で す 。 


一 通 で わか る サン ブル 


これ は サン プル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 こ れ 
は サン プル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 


プル の サイ ド バ ー の テキ スト で す 。 こ れ は サン プル の サイ 
ド バ ー の テキ スト で す 。 


見 えな い 部 分 へ の こだわ り 


これ は サン プル の フッ ター の テキ スト で す 。 こ 
れ は サン プル の フッ ター の テキ スト で す 。 こ れ 
は サン プル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 


Ccpyright 2012 sgmle site Alirights reserved 


これ は サン プル の フッ ター の テキ スト で す 。 こ 
れ は サン ブル の フッ ター の テキ スト で す 。 こ れ 
は サン プル の フッ ター の テキ スト で す 。 こ れ は 
サン ブル の フッ ター の テキ スト で す 。 








CSS 指 定 後 の フ ッ タ ー の 表示 。 こ れ で 一 応 の 完成 














2 





8 2- 


cT て 


IE6 対応 へ の ヒン ト 


Pr 人 た 


サン プル ペー ジ は 完成 し まし た が 、HTMLS を 使う 場合 に は 、 古 い Internet Explorer で の 表示 
に 注意 する 必要 が あり ます 。 こ こ で は 「html5shiv.js] を 使っ て 、 簡 易 的 に 見 た 目 を 整え る 方 
法 を 紹介 し ます 。 


さて 、 こ れ で サン プル ペー ジ は 完成 し た の で す が 、 も し これ を 古い Internet Explorer に も 対応 さ 
せよ うと する と 、 こ こ か ら さ ら に 長い 道のり が は じ ま っ て し まい ます 。 参考 まで に 、 こ こ で 作成 し 
た サン プル ペー ジ が 、 Internet Explorer 6 だ と どの よう に 表示 され る の か を 紹介 し て お きま し ょ う 。 


詩 柏 式 会 注 サ ン ブ ル ・ サ イト - Mi [ 
アイ ル ⑰ 四 和 O 表 志 ) お WEAD ウー ル D 0⑪ 
GR の の の wR 表 mO0 の は ・ 生 回 ・ マ る 


S ら samplesite 





日 本 の サン プル の 
リン アン スル ルレ クム モー ピ イ - 
日 指し ます 。 


サン プル だ か ら こ その “カタ チ " が ある 最高 の サン ブル を 英 き の プ ライ ス で ! 


わか りや すい サン プル は どう めも べき な の か osxsmxtusptopc= 人 サン ブル の サイ ド バ パー の テキ スト で す 。 これ | は サン ブル の サイ ド バ パー 


中 主 ミ は 決ま っ て きま す 。 こ れ | は サン ブル の テキ スト で す 。 こ れ は サン プ 2 


り テ キス ト で す 。 これ! は サン ブル の テキ スト で す 。 こ れ は サン ブル の チキ スト で rtf サン ブル ブル ルン 」」 メ イキ ング 公開 
プル の サイ ド パ パ ー の チキ スト で す 。 こ れ | は サン プル の サイ ギー 
ト で す 。 こ れ は サン ブル の サイ ド パ ー の テキ スト で す 。 


か る サン ブル 


: れ は サン プル の テキ スト で す 。 これ は サン プル の 
テキ スト で す 。 こ れ は サン ブル の テキ スト で す 。 これ は サン ブル の テキ スト で す 。 


これ は サン ブル の フッ ター の テキ スト で す 。 これ は サン プル の フッ ター の チキ スト で す 。 こ れ は サン プル の フッ ター の テキ スト で す 。 これ |! は サン ゴル の フッ ター の テキ スト で 
ep 


見 えな い 部 分 へ の こだわ り 


これ は サン ブル の フッ ター の テキ スト で す 。 これ は サン プル の フッ ター の チキ スト で す 。 これ は サン ゴル の フッ ター の テキ スト で す 。 これ | は サン プル の フッ ター の テキ スト で 
ま 


社会 活動 ・ 環 境 活動 


これ は サン プル の フッ ター の テキ スト で す 。 これ は サン プル の フッ ター の テキ スト で す 。 これ は サン ブル の フッ ター の テキ スト で す 。 これ は サン ゴル の フッ ター の チキ スト で 





完成 し た サン プル ペー ジ を Internet Explorer 6 で 表示 させ た と ころ 


3! 和 キ ペー ジ を まる ご と 作っ て みよ う 


CSS が 適用 され て いる 部 分 も あり ます が 、 ま っ た く 適 用 され て いな い 部 分 も ありま す 。 こ の よう 

に な っ て いる 最大 の 原因 は 、Chapter 7 で も 解説 し た よう に 、 古 い Internet Explorer が HTML5 の 
新 要素 を 認識 で き な い こと に あり ます 。 し た が っ て 、 コ ラム 「HTML5 の 新 要素 を 古い IE に 認識 さ 
せる 方 法 (p.129)」 で 紹介 し た 方 法 を 使え ば 、 表 示 結果 は ずい ぶん と 改善 され ます 。 


試し に 、「http://code.google.com/p/html5shiv/] で 「html5shivjs] を ダウ ン ロ ー ド *" し て 、 サ 
ンプ ル ペ ー ジ に 読み 込ま せ た 状 態 が 次 の スク リー ン シ ョ ッ ト で す ( そ の ほか に 、CSS の セレ クタ と 
し て 使用 し て いる nth-chi1]d( ) を 普通 の id を 対象 と し た 指定 に 変更 し て いま す )。 


読み 込ま せ た サ ンプ ルフ ァイル 


sample/chapter-12/practice-12-6/jindex.htm1 
sample/chapter-12/practice-12-6/styles.css 


@ ゃ の 回 軸 の の mw 安 eeo の は ・ あ 回 ・ 思 人 和 
So 5amplesite 


Atooo mAoE or ts smE 


ネー ム お 9 ちせ 品 信 林 サー ビ ゼ EL お 本 い 人 る わせ 


目 本 の サン プル の 
リン アン ンス ルル ング ムー キー ニコ 
ii の を 記 


サン プル だ か ら こ その “カタ チ " が ある 


わか りや すい サン ブル は どう ある べき な の か 7 その 言 き 知っ て いる か どう か で ユ 
ーー ル の 叶え は 決ま っ て きま す 。 こ れ | は サン ブル の テキ スト で す 。 これ は サン ブ 
ル の テキ スト で す 。 これ は サン プル の テキ スト で す 。 これ は サン プル の テキ スト で 
すす . こ れ は サン ブル の テキ スト で す 。 


これ | は サン プル の テキ スト で す 。 こ れ | は サン ブル の チキ スト で す 。 これ は サン プル の 
テキ スト で す 。 これ は サン ブル の テキ スト で す 。 こ れ は サン プル の チキ フト で す 。 


最高 の サン ブル を 産ま の ブラ イス で ! 


これ ( は サン プ ブル の サイ ド パ ー の テキ スト で す 。 こ れ は サン ブル の 
サイ ド バ パー の テキ スト で す 。 これ は サン ブル の サイ ド パ ー の テキ 
スト で す 。 


cf サン ブル ブル ルン ゆ 」 メ イキ ング 公開 
これ! サン ブル の サイ ド パ バー の テキ スト で す 。 こ れ は サン ブル の 


サイ ド バ パー の テキ スト で す 。 これ は サン ブル の サイ ド パ バー の テキ 
スト で す 。 


一 騎 で わか る サン ブル 見 えな い 部 分 へ の こだわ り 社会 活動 ・ 環 境 活 動 


これ ! は サン ブル の フッ ター の テキ スト で す 。 こ れ は サ 。。 これ は ザン プル の つ ッ ター の テキ スト で す 。 これ は サ 
ンプ ル の フッ ター の テキ スト で す 。 これ は サン ブル の 。 ンプ ゴル の フッ ター の テキ スト で す 。 これ は ケン プル の 
フッ ター の チキ スト で す 。 これ | は サン ブル の フッ ター フッ ター の テキ スト で すず 。 こ れ は サン プル の フッ ター 


の テキ スト で す 。 の テキ スト で す 。 


の テキ スト で す 。 





「html5shivjjs] を 読み 込ま せ 、 セ レク タ nth-chi1d( ) を 使わ な いよ うに 変更 し た 状態 


※ 17 : 本 書 の サン プル ファ イル に は 「html5shivjjs] は 含ま れ て いま せん 。 上 の ソー スコ ー ド で 実際 に 試し て みる 場合 に は 、「http:// 
code.google.com/p/html5shiv/] か ら 最 新版 の 「html5shivjs] を ダウ ン ロ ー ド し て サン プル と 同じ フォ ル ダ に 入れ て くだ 


さい 。 


これ! サン ゴル の フッ ター の テキ スト で す 。 これ | は サ 
ンプ ル の フッ ター の テキ スト で す 。 これ は サン プル の 
ター の テキ スト で す 。 こ れ は サン プル の フッ ター 
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これ だ け で も 、 表 示 結 果 は ずい ぶん と 良く な っ て いま す 。 し か し 、 細 か い 部 分 まで 見 て いく と 、 修 
正す べき 部 分 は まだ まだ 多く あり ます 。 た と えば 、Internet Explorer 6 は 透過 PNG に 対応 し て い 
ませ ん 。 透過 PNG を 表示 させ る と 、 本 来 透過 すべ き と こ ろ が 少し 青 っ ぽい グレ ー に な っ て 表示 さ 
れる の で す 。 こ の 問題 は 、 画 像 を 透過 し な いも の に 変更 する か 、 透 過 GIF に 変更 する な ど で 対 処 で 
きま す 。 


それ 以外 の 細か い 部 分 に つい て は 、Internet Explorer の 独自 拡張 に よる 条件 分 岐 コ メン ト や CSS 
ハッ ク な ど と いう も の を 使う こと で 、 対 処す る こと が 可能 で す ( イ ンタ ーネット で 検索 する と 驚く 
ほど 多く の 対応 策 が 出 て きま す )。 し か し 、 古 い Internet Explorer に 対応 させ る と いう こと は それ 
だ け で 多く の 手間 が か か る だ け で な く 、 多 く の 新 機能 が 使え な く な る と いう こと で も あり ます ( つ 
まり 設計 か ら 変 える 必要 が 出 て くる 場合 も あり ます )。 そ の た め 、 最 近 で は Internet Explorer 6 に 
対応 させ た Web ペ ー ジ を 制作 する 場合 に は 別 料金 が 必要 と な る 制作 会 社 も 増え て き て いま すし 、 
対応 ブラ ウザ か ら あ えて Internet Explorer 6 を 外し て リリ ー ス する Web サ ービス も 多く な っ て い 
ます 。 


CAPTE ょ k 「2 ペー ジ を まる ご と 作っ て みよ う 


人 4PPEMp/ と 


ゴリ ー に 該当 する の か 、 どこ に 配置 で きる の か 、 内 容 と し て 
同 を 入れ る こと が で きる の か 、 とい っ た 情報 を 一 覧 で 示し て 
お きま す 。 
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自由 配置 コン テン ツ (Flow content) 
































































































































































d command htm1 optgrouDp sub 

abbr 」 datalist 1 option summary 

address dd | 1frame SUuD 

area de1 1mg P table 

article details | 1nput param tbody 

aside | dfn 1ns Pre | td 

audio | div kbd Progress textarea 

b d1 keygen q tfoot 

base dt ]1abe1 TD th 

bdi em rt thead 

bdo ーー ruby time 

bl1ockquote fieldset S title 
| body figcaption SamDp じ 

br figure Script track 
| button footer section u 

canVas form select ul 

caption | PL <h6 meter sma]1 

c1te head nav SOUTCe 

code 5 header noscript span 

co1 hgroup | object strong 

colgroup hr | ol style 














※area 要 素 は map 要素 に 含ま れ て いる 場合 の み 該当 


※ style 要 素 は scope 属性 が 指定 され て いる 場合 の み 該当 


巻末 資料 














セク ショ ンコ ン テ ン ツ (Sectioning content) 



















































































































































































a command html optgroup sub 
abbr datalist j option summary 
address dd iframe Output SUuD 
area de]1 jmg D table 
世 details input Param tbody 
・ dfn ins 」 pre td 
audio div kbd DrOgreSs textarea 
b d1 keygen d tfoot 
base dt 1abel FD th 
bdi em 1egend | 委 り thead 
bdo embed 1]1 ruby time 
blockquote fieldset | link Ss title 
body figcaption map Samp tr 
br figure mark Script track 
button ] footer menu U 
CanVas form meta select ] ul 
caption hl 一 h6 meter sma]1 Var 
cite head SOUPCe video 
code header noscript span wbr 
co1 hgroup object strong テキ スト 
| colgroup hr o1 style 
見 出し コン テン ツ (Heading content) 
a command htm1 Optgroup sub 
abbr datalist 1 1 option summary 
address dd 1frame output SUD 
area de1 1mg p table 
article details 1nput param 」 tbody 
aside dfn ] ins Pre td 
audio div kbd DrogreSss textarea 
b d1 keygen q tfoot 
base dt ]abe1 rD th 
| bdi em ]1egend rt l thead 
bdo embed ]1 ruby (| time 
blockquote fieldset 1ink Ss title 
body figcaption map samp Eh 
br figure mark Scr1pt track 
button footer menu section U 
CanVas form meta select ul 
caption meter sma1l1 Var 
cite head nav SOuUTCe video 
code header noscript span wbr 
co1 object strong テキ スト 
colgroup hr ol style 
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APPevpyx 


文章 内 コン テン ツ (Phrasing content) 


address 


article 


blockquote 


details 


fieldset 








body 


caption 


co1 


figcaption 


footer 


OptgrouDp 


Summary 














form 








Lhead |nav source 


hgroup 








| colgrouPp 





hr 











※a 要 素 ・de] 要素 ・1ns 要素 ・map 要素 は 文章 内 コン テン ツ だ け を 含ん で いる 場合 の み 該当 
※area 要素 は map 要素 に 含ま れ て いる 場合 の み 該当 


組み 込み コン テン ツ (Embedded content) 





















































































































































































command html optgroup sub 
datalist LU option Summary 
address dd output SUD 
| area de1 D table 
| article details 1nput param tbody 
aside dfn ns Dre 」 td 
div kbd Drogress textarea 
b d1 keygen | 9 tfoot 
base dt ]1abe1 TD | th 
1egend rt thead 
ruby time 
blockquote fieldset 1ink title 
body figcaption map 半 
br figure mark Script | track 
button footer 」 menu section _|u _ | 
form meta select ul 
caption h1 一 h6 meter sma11 var 
Ge head nav SOUTCe yteeeo_ _ | 
code header noscript span wbr 
co1 hgroup strong テキ スト 
colgrouDp hr style 
巻末 資料 


メタ デー タコ ン テ ン ツ (Metadata content) 
















































































































































a html optgroup sub 
abbr datalist j option ] summary 
address dd iframe output SUD 
area de1 img p table 
article | details 1nput param tbody 
aside _ | dfn 1ns Pre td 
audio div kbd PrOgreSSs textarea 
b d1 keygen q tfoot 

sase_ [wt 1abe1 rp | th 
bdi em 1egend rt thead 
bdo embed iM ruby time 
blockquote fieldset 
body figcaption map samp tr 
button footer menu section U 
Canvas | form se ul 
caption hl 一 h6 meter sma11 Var 
cite head naVv SOUPTCe video 
code header span | wbr 
co1 hgroup object strong テキ スト 
colgroup hr o1 

イン タラ クティ ブ コ ン テ ン ツ (Interactive content) 

command htm1 optgroup sub = 
abbr datalist i option Summary 
address dd output SUD 
area del D table 
article Daram tbody 
Pre 








d1 














ーー 


DrOgreSs 

































CanVas 


form 








meta 




































q 
[ base dt rD th 
bdi em 1egend rt thead 
bdo ]i ruby time 
blockquote fieldset ]ink Ss title 
body figcaption map Samp 上 
br figure mark Script | track 
section 


























caption h1 一 h6 meter smal1 

cite head nav SOUTCe 

code header noscript Span wbr 
co1 hgroup strong | テキ スト 
colgroup hr o1 style 





※audio 要 素 と video 要素 は contro]s 属 性 が 指定 され て いる 場合 の み 該当 
※1mg 要 素 と object 要 素 は usemap 属 性 が 指定 され て いる 場合 の み 該当 
※ 1nput 要 素 は type 属 性 の 値 が 「hidden] 以外 の 場合 の み 該当 


※menu 要 素 は type 属 性 の 値 が 「too1bar」 の 場合 の み 該当 
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HTML5 の 要素 の 配置 の ルー ル 


_abbr 
address 


article 


body 


button 


配置 で きる 場所 

自由 配置 コン テン ツ が 配置 で きる 場所 。 内 
容 が 文章 内 コン テン ツ の み の 場 合 は 、 文 章 
内 コン テン ツ が 配置 で きる 場所 。 





子 要素 と し て 直接 入れ られ る 要素 


親 要素 に 入れ られ る 要素 と 同じ (た だ し 内 部 
に イン タラ クティ ブ コ ン テ ン ツ を 含む こと は 


で き な い ) 





文章 内 コン テン ツ が 配置 で きる 場所 


文章 内 コン テン ツ 





自由 配置 コン テン ツ が 配置 で きる 場所 


自由 配置 コン テン ツ ( た だ し 内 部 に 見 出し コ 
ン テ ン ツ ・ セ クシ ョ ンコ ン テ ン ツ ・header 要 
素 ・footer 要 素 ・address 要 素 を 含む こ 
と は で き な い ) 











map 要素 内 で 文章 内 コン テン ツ が 配置 で き | な し 

る 場所 

自由 配置 コン テン ツ が 配置 で きる 場所 自由 配置 コン テン ツ 
自由 配置 コン テン ツ が 配置 で きる 場所 自由 配置 コン テン ツ 





組み 込み コン テン ツ が 配置 で きる 場所 


src 属 性 が 指定 され て いる 場合 は 、0 個 以上 
の track 要 素 に 続け て 親 要素 に 入れ られ る 
要素 と 同じ 要素 。src 属 性 が 指定 され て いな 
い 場 合 は 、 は じ め に 0 個 以上 の source 要 素 
を 配置 し 、 次 に 0 個 以上 の track 要 素 、 親 
要素 に 入れ られ る 要素 。 い ずれ の 場合 も 、 内 
部 に audio 要 素 と video 要 素 は 含む こと が 
で き な い 























文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 

head 要素 内 (た だ し 複数 は 配置 で を ない) | な し 

文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 

文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 

自由 配置 コン テン ツ が 配置 で きる 場所 自由 配置 コン テン ツ 

htm1 要素 内 に 2 つ 目 の 子 要素 と し て 配置 自由 配置 コン テン ツ 
文章 内 コン テン ツ が 配置 で きる 場所 な し 
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文章 内 コン テン ツ が 配置 で きる 場所 





文章 内 コン テン ツ ( た だ し 内 部 に イン タラ ク 
ティ ブ コ ン テ ン ツ を 含む こと は で き な い ) 








巻 未 資料 








配置 で きる 場所 子 要素 と し て 直接 入れ られ る 要素 



































canvas 組み 込み コン テン ツ が 配置 で きる 場所 親 要素 に 入れ られ る 要素 と 同じ 
caption tab1e 要 素 の 最初 の 子 要素 と し て 配置 | 自由 配置 コン テン ツ ( た だ し 内 部 に tab1e 要 
| 素 を 含む こと は で き な い ) 
cite 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
code 文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 
co1 sapn 属 性 の 指定 され て いな い co1lgroup | な し 
要素 の 子 要素 と し て 配置 | 
co1group tab1e 要 素 の 子 要素 と し て 配置 (た だ し | span 属 性 が 指定 され て いる 場合 は 内 容 は 空 
caption 要 素 よ り も 後 で 、thead 要 素 ・| span 属 性 が 指定 され て いな い 場 合 は 0 個 
tbody 要素 ・tfoot 要素 ・tr 要素 より も 前 | 以上 の co1 要素 
に 配置 | 
ト 一 ー ーー ー 
command メタ デー タコ ン テ ン ツ ま た は 文章 内 コン テ | な し 
ン ツ が 配置 で きる 場所 | 
data1ist 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ ま た は option 要 素 を 0 個 
| 以上 
dd d1 要素 内 で 、 dt 要素 また は dd 要素 の 後 | 自由 配置 コン テン ツ 


de1 自由 配置 コン テン ツ が 配置 で きる 場所 。 内 | 
容 が 文章 内 コン テン ツ の み の 場 合 は 、 文 章 | 
内 コン テン ツ が 配置 で きる 場所 


親 要素 に 入れ られ る 要素 と 同じ 


ピー ーーーー テ キー ーー ーーーーーーーーーー 一 ーーーーーーーーー ー キ 





























details 自由 配置 コン テン ツ が 配置 で きる 場所 | summary 要 素 を 1 つ 、 そ の 後に 自由 配置 コ 
| ンジ シン 8/ 
| afm 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ ( た だ し 内 部 に dfn 要素 を 
含む こと は で き な い ) 
div 自由 配置 コン テン ツ が 配置 で きる 場所 自由 配置 コン テン ツ 
d1 自由 配置 コン テン ツ が 配置 で きる 場所 | 1 つ 以 上 の dt 要素 に 続く 1 つ 以 上 の dd 要素 
の グル ー プ を 0 個 以上 
dt d1 要素 内 で 、 dd 要素 また は dt 要素 の 前 | 文章 内 コン テン ツ ( た だ し 内 部 に header 要 
素 ・footer 要 素 ・ セ クシ ョ ンコ ン テ ン ツ ・ 
| 見 出し コン テン ツ を 含む こと は で き な い ) 
em 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
ambed 組み 込み コン テン ツ が 配置 で きる 場所 | な し 
fie1dset 自由 配置 コン テン ツ が 配置 で きる 場所 | 必要 に 応じ て 最初 に 1egend 要 素 を 1 つ 、 そ 


| の 後に 自由 配置 コン テン ツ 
figcaption figure 要 素 の 最初 また は 最後 の 子 要素 と | 自由 配置 コン テン ツ 
し て 配置 | 


ー T 
figure 自由 配置 コン テン ツ が 配置 で きる 場所 | 1 つの figcaption 要 素 に 続け て 自由 配置 
コン テン ツ を 配置 / 自 由 配 置 コ ン テ ン ツ の 最 
後に fgcaption 要 素 を 1 つ 配 置 / 自 由 配 
置 コ ン テ ン ツ 
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ドコ | 配置 で きる 場所 | 子 要素 と し て 直接 入れ られ る 要素 
footer 自由 配置 コン テン ツ が 配置 で きる 場所 自由 配置 コン テン ツ ( た だ し 内 部 に header 
要素 ・ footer 要 素 を 含む こ と は で き な い ) 
form 自由 配置 コン テン ツ が 配置 で きる 場所 自由 配置 コン テン ツ ( た だ し 内 部 に form 要 
素 を 含む こと は で き な い ) 
hl 一 h6 自由 配置 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 
hgroup 要素 の 子 要素 と し て 配置 
head htm1 要素 の 最初 の 子 要素 と し て 配置 | 1 つ 以 上 の メタ デー タコ ン テ ン ツ ( そ の うち 1 
つ は title 要 素 )。1frame の 内 容 と な る 文 
書 な どの 場合 は 0 個 以上 の の メタ デー タコ ン 
| テン ツ 
header 自由 配置 コン テン ツ が 配置 で きる 場所 自由 配置 コン テン ツ ( た だ し 内 部 に header | 
要素 ・ footer 要素 を 含む こ と は で き な い ) 
hgroup 自由 配置 コン テン ツ が 配置 で きる 場所 h1 一 h6 要 素 を 1 つ 以上 
hr 自由 配置 コン テン ツ が 配置 で きる 場所 な し 
り ーー 
html すべ て の 要素 を 含む ルー ト 上 要素 と し て 配置 head 要 素 と body 要 素 を 順に 1 つ ず つ 
i 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
1frame 組み 込み コン テン ツ が 配置 で きる 場所 | テキ スト 
1mg 組み 込み コン テン ツ が 配置 で きる 場所 | な し 
eeemeemm テ キー ーーー ーー 一 ー ーーー 一 + ーー 
1nput 文章 内 コン テン ツ が 配置 で きる 場所 な し 
ins 自由 配置 コン テン ツ が 配 置 で きる 場所 。 内 親 要 素 に 入れ られ る 要素 と 同じ 
容 が 文章 内 コン テン ツ の み の 場 合 は 、 文 章 
内 コン テン ツ が 配置 で きる 場所 | 
kbd 文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 
keygen 文章 内 コン テン ツ が 配置 で きる 場所 な し 
]abe1 | 文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ ( た だ し 内 部 に 1abe1 要素 
を 含む こと は で き な い 。 ま た 、1abe1 要素 と 
関連 付け な い button 要 素 ・1nput 要 素 ・ 
keygen 要 素 ・meter 要 素 ・output 要 素 ・ 
| progress 要 素 ・select 要 素 ・textarea 
| 要素 は 内 部 に 含む お こと は で き な い ) 
1egend fe1dset 要素 の 最初 の 子 要素 と し て 配置 | 文章 内 コン テン ツ 
1 1 要素 内 o1 要 夫 内 menu 要素 内 | 自由 配置 コン テン ツ 
1ink メタ デー タコ ン テ ン ツ が 配置 で きる 場所 / | な し 
head 要 素 の 子 要素 で ある noscript 要 素 
内 
トト ーー 
map 自由 配置 コン テン ツ が 配置 で きる 場所 。 内 親 要素 に 入れ られ る 要素 と 同じ 
容 が 文章 内 コン テン ツ の み の 場 合 は 、 文 章 
内 コン テン ツ が 配置 で きる 場所 | 
mark 文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 
作 pPevprx 巻 未 資料 





| 子 要素 と し て 直接 入れ られ る 要素 
















































































| 配置 で きる 場所 
menu 自由 配置 コン テン ツ が 配置 で きる 場所 11i 要素 を 0 個 以上 。 ま た は 自由 配置 コン テ 
ーー | シ ツ 
meta http-equiv 属 性 を 指定 し て いる 場合 は | な し 
head 要 素 内 、 ま た は head 要 素 の 子 要素 で 
ある noscript 要 素 内 (た だ し 文字 コー ド の 
指定 は noscript 要 素 内 は 不可 ) プ name 属 
性 が 指定 され て いる 場合 は メタ デー タコ ン 
テン ツ が 配置 で きる 場所 
Oo デー 本 
meter 文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ッ (た だ し 内 部 に meter 要 素 
を 含む こと は で き な い ) 
ea 等 還 
nav 自由 配置 コン テン ツ が 配置 で きる 場所 自由 配置 コン テン ツ 
noscript head 要素 内 、 また は 文章 内 コン テン ツ が 配 | head 要 素 内 の 場合 は 1ink 要 素 ・sty1e 要 
置 で きる 場所 (た だ し 内 部 に noscript 要 | 素 ・meta 要 素 を 順不同 で 任意 の 数 /head 
素 を 含む こと は で き な い ) 要素 外 の 場合 は 親 要素 に 入れ られ る 要素 と 同 
じ ( た だ し 内 部 に noscript 要 素 を 含む こと 
は で き な い ) 
object 組み 込み コン テン ツ が 配置 で きる 場所 0 個 以上 の param 要 素 に 続け て 、 親 要素 に 
入れ られ る 要素 と 同じ 要素 
トーーーーーーーーーーーー†ーー ーーー = ー ーーーーーー ーー 
o1 | 自由 配置 コン テン ツ が 配置 で きる 場所 | 0 個 以上 の 11 要素 
optgroup select 要 素 の 子 要素 と し て 配置 0 個 以上 の option 要 素 
option select 要 素 ・data]list 要 素 ・optgroup | テキ スト 
要素 の 子 要素 と し て 配置 | 
output 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
ト 半 自由 配置 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 
param object 要素 の 子 要素 と し て 、 と の 自由 配 な し 
置 コン テン ツ よ り も 前 に 配置 | 
pre 自由 配置 コン テン ツ が 配置 で きる 場所 。。 | 文章 内 コン テン ツ 
Pro9ress 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ ( た だ し 内 部 に progress 
| 要素 を 含む こと は で き な い ) 
q 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
rp ruby 要素 の 子 要素 と し て 、rt 要 素 の 直 | 文章 内 コン テン ッ 
また は 直後 に 配置 
p セ ruby 要素 の 子 要素 と し て 配置 文章 内 コ ・ シ デ シ ン ッ 
| ruby 文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ に 続く rt 要素 、 ま た は 文 
| 章 内 コン テン ツ に 続く rp 要素 ・rt 要 素 ・rp 
| 要素 を 1 つ 以 上 
s 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
samp 文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 
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子 要素 と し て 直接 入れ られ る 要素 
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script メタ デー タコ ン テ ン ツ ま た は 文章 内 コン テ | スク リプ ト の ソー スコ ー ド 。 src 属 性 が ある 
ン ツ が 配置 で きる 場所 | 場合 は 内 容 は 空 ま た は コメ ント に よる 説明 の 
| ぁ 
_ を = 」 
section 自由 配置 コン テン ツ が 配置 で きる 場所 | 自由 配置 コン テン ツ 
select 文章 内 コン テン ツ が 配置 で きる 場所 | option 要 素 ま た は optgroup 要素 を 0 個 以 
# 志 
sma11 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
SOurCe audio 要 素 ま た は video 要素 の 子 要素 と し | な し 
て 、 他 の 自由 配置 コン テン ツ ま た は track | 
要素 より も 前 に 配置 
span 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
strong 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
style scoped 属 性 が 指定 され て いな い 場 合 は メ | スタ イル シー ト の ソー スコ ー ド 


タデ ー タ コン テン ツ が 配置 で きる 場所 、 ま 
た は head 要 素 の 子 要素 で ある noscript 
要素 内 だ scoped 属 性 が 指定 され て いる 場 
合 は 自由 配置 コン テン ツ が 配置 で きる 場所 
(た だ し 他 の 自由 配置 コン テン ツ よ り も 前 ) 


















































sub 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
] 生き 
summary detai1 s 要素 の 最初 の 子 要素 と し て 配置 | 文章 内 コン テン ツ 
SUP 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 
table 自由 配置 コン テン ツ が 配置 で きる 場所 | 次 の 順に 配置 : 0 個 か 1 個 の caption 要 素 
0 個 以 上 の colgroup 要素 だ 0 個 か 1 個 の | 
| thead 要 素 /0 個 か 1 個 の tfoot 要 素 /0 | 
個 以上 の tbody 要素 また は 1 個 以 上 の tr 要 | 
素 /0 個 か 1 個 の tfoot 要 素 (た だ し 、tfoot | 
要素 は tab1e 要 素 内 で 計 1 つの み 配置 可 ) | 
tbody table 要 素 の 子 要素 と し て caption 要 素 ・ | 0 個 以上 の tr 要素 
colgroup 要 素 ・thead 要 素 よ り も 後に 配 | 
置 ( た だ し table 要 素 の 直接 の 子 要素 で あ 
る tr 要素 が な い 場 合 の み ) | 
に ーーー ニ ーー ニー ニーー ニ ーー | = ー 
td tr 要素 の 子 要素 と し て 配置 | 自由 配置 コン テン ツ 
textarea 文章 内 コン テン ツ が 配置 で きる 場所 | テキ スト | 
tfoot tab1e 要 素 の 子 要 素 と し て 、caption 要 素 ・| 0 個 以上 の tr 要素 | 
colgroup 要 素 ・thead 要素 の 後 で 、tbody | 
要素 と tr 要素 より も 前 に 配置 。 ま た は 、| 
tab1e 要素 の 子 要素 と し て 、 caption 要素 ・ | 
co1group 要素 ・thead 要 素 ・tbody 要素 ・ 
tr 要素 の あと に 配置 。 た だ し 、 同 じ table | 
] 要素 内 に 別 の footer 要 素 は 配置 で き な い | 
用 PPevprx 巻末 資料 





























E ま そう | 号 置 で きる 場所 | 子 要 素 と し て 直接 入れ られ る 要素 
th tr 要素 の 子 要素 と し て 配置 | 文章 内 コン テン ツ ( た だ し 内 部 に header 要 
素 ・footer 要 素 ・ セ クシ ョ ンコ ン テ ン ツ ・ 
見 出し コン テン ツ を 含む こと は で き な い ) 

thead table 要 素 の 子 要素 と し て 配置 (た だ し | 0 個 以 上 の tr 要素 

caption 要素 ・colgroup 要素 より も 後 で 、 

tbody 要素 ・tfoot 要 素 ・tr 要 素 よ り も 前 

に 配置 。 同 じ tab1e 要 素 内 に 複数 の thead | 

要素 は 配置 で き な い ) | 
time 文章 内 コン テン ツ が 配置 で きる 場所 | 文章 内 コン テン ツ 

ーー ーーー に で ーーー 記 

title head 要 素 内 に 配置 (た だ し 複数 は 配置 で ます | テキ スト 

な い ) | 
tr thead 要 素 ・tbody 要素 ・tfoot 要 素 の 子 | 0 個 以上 の td 要素 また は th 要 素 

要素 と し て 配置 ノ tab]e 要 素 の 子 要素 と し | 

て caption 要 素 ・colgroup 要素 ・thead 

要素 より も 後に 配置 (た だ し tbody 要素 が 

な い 場 合 の み ) 
track audio 要 素 ま た は Video 要 素 の 子 要素 と し | な し 

て 、 他 の 自由 配置 コン テン ツ よ り も 前 に 配 | 

置 
U 文章 内 コン テン ツ が 配置 で きる 場所 文章 内 コン テン ツ 
M1 自由 配置 コン テン ツ が 配置 で きる 場所 11 要素 を 0 個 以上 








文章 内 コン テン ツ が 配置 で きる 場所 


| 文章 内 コン テン ツ 





video 


| 組み 込み コン テン ツ が 配置 で きる 場所 


src 属 性 が 指定 され て いる 場合 は 、0 個 以 上 
の track 要 素 に 続け て 親 要素 に 入れ られ る 
要素 と 同じ 要素 。src 属 性 が 指定 され て いな 
い 場 合 は 、 は じ め に 0 個 以上 の source 要 素 
を 配置 し 、 次 に 0 個 以上 の track 要 素 、 親 
要素 に 入れ られ る 要素 。 い ずれ の 場合 も 、 内 
部 に audio 要 素 ま た は video 要 素 を 含む こ 
と は で き な い 











wbr 





文章 内 コ ン テ ン ツ が 配置 で きる 場所 





な し 
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四 に 3 も ぶ ID セレ クタ CE た た まま また さま また 人 妥 相対 配置 COCOEEESRIRRRRRSSBI 180 
ーー E Internet Explorer ………- 017 ソー スコ ー ド ドー 016 

1 COREK KERR RE RE 017 属性 PKGKRRRRRRRKRRSNSNSS 036 
依 記 号 ・ 英 数 字 MKEditor ーー ドー ドー 016 属性 セレ クタ ーー 116 






Shift_JIS 
Strict 
TeraPad 
TranSiEjonal eeemoomweee 040 ナビ ゲー ショ ン …… "の 190,209 













BSDSSRVAN22vo02EGGOccca 957 が 計 億 区 2 三共 28Gt32oadath 036 
XHTML1.0 040H050' ZS2232SAO の 2 216 
ブラ ウザ ・… バ |( ド トド (ドド ドー 017 
@ 日 本 語 人 生か の o 0 
ウド ライ ジウ 5 プロ グレ ッ シ プ ・ 
エン ハジ ンズ メジ (NR っ =ncmeccn 046 
ブロ ッ ク レ ベル 要素 ・…・…… 






プロ パテ ィ 値 ・ 
049 ンー 全て 









ME 介 ireigaDARaiaiest yanretsss 041 和 聞 詩 配本 ee herssssees 180 
htm15shiv.Js …・ 129 
http-equ1v…… ド ドド ーー 053 








づ 要素 と 属性 








abbr 要 奏 ・………… ドーeemmmmm 077.322 
address 要 素 ・ ・ 128,322 
artic1e 要 到 ーーー 127.190.322 
as1de 本 反 ……………… ド ドー 127,190,322 





audio 要 到 … ド ドー ドド ーーー ・ 131.322 
(aud1o 要素 に 指定 で きる 属性 ) 
au も op1ay 132 





controls・ 


body 要 到 … ド ーー ドド ドド ドド ドー 051.322 
br 要素 NEAR RS RA RS ERR RUROROHORUUNOUOR 1 074, 322 
button 要素 PS RET LETA UIATLLUT 222.322 
(button 要素 に 指定 で きる 属性 
dj sab]1 ed PPERNRNIRROIREIIUREERRR ERO 222 





076,323 
076,323 
193.323 
247 ,323 
3.4077.3323 
074.323 
193.323 
・ 193.323 
075.323 
226.,323 





(fieldset 要素 に 指定 で きる 属性 
disabled PPP EEERROEEROOREEE は きまま まで で 227 








form 要 素 に 指定 で きる 属性 ) 





action に た まま にせ ませ は たま 信太 太 た ま まま た は 生ま あお 216 

enctype ーー 216 

method … 216 

OECD まま まま まま まま また まま まま た まな は 216 

9 6291616737EH3ze'ds せ 52RI2wtORUSPRIe 072,324 

051,.128,324 

hgroup 要素 COCCOELCRCELRLEIREEICRICIEIDRCRLRLRORE 073,324 

hr 要素 CCOECEEEEEEEEEEEEEEERERERERERIERERRRI 246,324 

・ 049,324 

077,324 

249,324 

ませ せ を な た な させ まま な きま お) 250 

PRIEEEEREEKEE EE まま させ いたい ささ に ませ 250 

250 

CELL まま ませ まま まま ませ ませ ませ ささ ささ せき せき ささ せる 250 

130,324 

POOREREREEE ま EE まま また ませ まき は ませ さいき) 131 

height CCCEEPEEEEEEEEEEEEEEEEEEEEEREIREEESE SU 

ST 131 

width POCKETEEEEEEEEEIEITERTERRRCERREE は ] 131 

1nput 要素 POCKETKRERONRREIERREERCCRRRE 217,324 
input 要 素 に 指定 で きる 属性 ) 

al1t OPTEREEEEEERRRERRSRRERERREKEESE) 218 

checked ーー トト ーー9 ル ドド ドド ドド トト ーー トー ッッ ーー 217 

disabled OECDCEELEERLEEEICEERRRRICRRRLLREI 218 

height も te ドド ドゥ ドド 218 

maxlength ーー ドド ドゥ ドゥ レー 217 

am ドド ドド ドド ドド ドド トト トト に ここ ーー 217 

readonly ーーー ドド ドド ドー ドド て 218 

GHZGC *3 Z17 
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datetimeーー ド ーー ドド ドド ドー ドド て 247 
1abe1 要素 
1abe] 要素 に 指定 で きる 属性 








11 要素 に 指定 で きる 属性 
Value・…… 





(1ink 要 素 に 指定 で きる 属性 





(meta 要素 に 指定 で きる 属性 
(G 用 9 人 、DI220002-JRKNfCC2RmCidcY が eX な 











conten も t に ドド ドド ドド ドド ドド ドド ドド トレ レト ドド に トー 
http-equiv・…・ 


190.209,325 
・191,325 
RG は RF に LIZ に [し 27 224,325 









d 要 素 EDPEE ま が まま まま まま まま まま まま まま 073,075,325 
rp 要 到 ドー ドド ドド 081,325 
rt 要 反 ドド ee ee 080,325 
ruby 要 到 … ド ーー ドド ドド ドド ドド ーー ドー 080.325 
script 要 径 ・… バ ーー ドー ドー ドー ドー ドー ドー 248.326 
Script 要素 に 指定 で きる 属性 
charse も バー ドド トト に に トド ドド 249 
に le 家 王 福 まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま まま 248 
type OPCDPEP ま ます で た す ま すす たま まま は またせ ささ た さま な な で 249 
Secilion 粗 業 い ーーmmmー リ ドー ン ッ パト 127,190,326 
select 要 到 上 ドド ドド oe rr 224,326 
select 要素 に 指定 で きる 属性 
disabled ・ 224 
multiple 224 





生き 基 思 ievteeeeciRRGaIaRieie siore7e itido 224 
[0 し 7 224 
sma]1 要素 ・‥‥ ド ドー ドド ーー ドー ドド ーー ドー ーー 076,326 
StUULHOY 上 3 哲二 記 く CC な 132,326 
(source 要素 に 指定 で きる 属性 
SIG7e3GCP207 の の 20220eCG2IGoic 134 





076,326 
075.326 
style 要 到 … ド ドー ドー トード ーーー ドー ドー ドー 057,326 





077,326 
077,326 
236,326 





table 要 素 に 指定 で きる 属性 ) 
border 





(td 要素 に 指定 で きる 属性 
colspan 
headers …・ 
rowspan 
textarea 要 素 ーー ドー ドー 221,.326 


textarea 要素 に 指定 で きる 属性 








th 要素 に 指定 で きる 属性 
co1span ーー ドド ドド ドド に に に 238 
人 HfS: < 238 


人 area7aIajaiaisrs95aeier2eraieusisrs21a 052,327 
191,.209.327 
131,327 





video 要 素 に 指定 で きる 属性 
autoplay 
controls 








draggable 
dropzone 
hidden COOEEESOTRILRRRRORRRRORRRRRLRORK ま まま まれ まき 





・060 





CSS 





ゆ ルール 

@charset … 

@1mport DPERERERRORCRRLRRRERARRRRRRRRKRJ 

@keyframes・ ーー ドー ドド ドレ レレ に て 278 

@med1 ーー 264 

jimportant 122 

ゆ セ レク タ 

dfTEGh ーー ドド ドド ドド ドド ドド に に に に ピピ に ピー 119.251 

sbefOFG ーー ドド ドド ドド ドド ドド ッッ ーーー 119,251 
first-letter 


DEVWGB.<n ュ 
6IHeIBIRG 20S20322030SSGOR2 き Sg コッ 2 ッッ 117 
sdisabled 一 ーー ドド ドーレ し し し し ピー 7 








:nth-]1ast-of-tyDe( ) PE たま た だす まま すす まま まま まま まま まま まま HHZ 
:nth-of-tyDe( ) EEE だ まま まま まま まま まま まま まま まま まま まま まま まま 】 1 は 以 
:on]1y-chi]d また た まま まま まま まま さま まま まま まま まま まま まま まま By4 
:Only-of-tyPe CEEE ま まま まま まだまだ ま すま まま まま まま まま まき まま 117 
rootー ド ドド ドド ドド に に に に dM ば 
targe も ドド ドド 117 
:visited DEE ま ま ま ま 肖 まま まま EE 人 に 1 


ゆあ プロ パテ ィ と 値 
animation-direction プ ロ パ ティ ーー 282 


animation-direction に 指定 で きる 値 
alternate 









alternate-reverse・ 
noOrmal EEEEYSEE EE まき きす まま まき まま まま まま きき 
に 1 は RE 
animation-delay プロ パテ イィ イー ドド ドド ーー 
animation-duration プロ パテ ィ 
animation-1teration-count プ ロ パ ティ ーー…… 282 
animation-1iteration-count に 指定 で きる 値 ) 
infinite 
animation-name プロ パテ イィ イー ドド ドド ーー 279 





animation-name に 指定 で きる 値 





YU 
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(の ヒ E 入 





background プ ロバ パ ティー ドド ドド ドー ドド ーー ドー 161 
background-attachment プ ロ パ ティ ーーーー 152 


(background-attachment に 指定 で きる 値 ) 





(background-color に 指定 で きる 値 ) 


transparent・ ド ーー ドド ドド ドド ドド に に 062 
background-1image プロ パテ ィ ー… ドー 065 

(background-image に 指定 で きる 値 ) 

Ur1()・ 





(background-repeat に 指定 で きる 値 ) 
nOcPeDeat eee 
NGPA eeeeeneeeeessohenseiasssessnsees 
は の (FU: 生 OUPVPCPKCPPPPPFPPPFFPPPPPPPPPPPP 
DD る NPDEMSSaauo9cdaggdegsgusx 
background-s1ize プ ロ パ ティ …・ 





(background-size に 指定 で きる 値 ) 












auto OO すま まき まき まき まま せき きき まま ます きま まま ませ る 

contajn 

cOVer… 
border プ ロバ テイ ei 140 
border-bottom-color プロ パテ ィ ーー 140 
border-bottom-left-radius プロ パテ ィ ーー 148 
border-bottom-right-radius プロ パティ ーー- 148 
border-bottom-style プロ パテ イィ ーーーーーーー 140 
border-bottom-width プロ パテ イィ ーー ドー 140 
border-bottom プロ パテ ィ 
border-col1apse プロ パテ イィ ーー 242 

(border-collapse に 指定 で きる 値 ) 

collapse 

SeDarate -- 
border-color プロ パテ イィ ドー で ドー ドー 140 


(ボー ダー の 色 と し て 指定 で きる 値 ) 





transparent・ ド ーー ドド ドー ドド ーー ドー ドー ドー 141 
border-1eft-color プ ロ パ ティ ーー ドー ーー 140 
border-left-style プロ パテ ィ ー 140 
border-1eft-width プロ パテ イィ ーー 140 
border-1eft プ ロ パ テイ ドド ドド mee rm 140 
border-radius プロ パテ イィ ドド 148 
-moz-border-radfus-bottomleft プ ロ パ ティ 

OCS は は ま まま まま まま まま まま きせ 及 き 生生 まき 150 
-moz-border-radius-bottomright プロ パテ ィ 

COO 150 
-moz-border-radius-topleft プ ロ パ ティ 150 
-moz-border-radius-topright プロ パテ ィ ……・ 150 
border-right-color プ ロ パ ティ ーー ドド 140 
border-right-style プ ロ パ ティ ドド ーー 140 
border-right-width プロ パテ イィ ドド ーー 140 
border-right プロ パテ イィ ドド ドド ドド トド ーーー 140 
border-style プロ パテ イィ ドド ドド ドド ーー ーーー 140 


ポー ダー の 線 種 と 
dashed 
dotted 
double 
grooVe 
hidden 










border-top-color プロ パテ ィ 
border-top-left-radius プロ パテ ィ イー 148 
border-top-right-radius プロパティー 148 
border-top-style プロ パテ ィ 
border-top-width プロ パテ ィ ・・ 
border-top プ ロ パ ティ ーー ドー ドー ドー ドー 
border-width プロ パテ イ ーー ドー ドー ドド ーー 


(ボー ダー の 太 さ と し て 指定 で きる 値 ) 


ed1Um ーー ドー ドー ドド ドド ドド トト トト トレ レト トット ーー 
box- shadow プロ パテ ィ 
(box-shadow に 指定 で きる 値 





caption-side プロ パテ イィ ーーー 243 


(caption-side に 指定 で きる 値 ) 
bottom ・ 


color プロ パテ ィ ・ 


(color に 指定 で きる 値 ) 
transparent… ド ドー ドー ドー ドー ドド ーーー ドー 085 
content プ ロ パ テイ ドー ドド ドド ドド ドー ピー ピー ツー 251 


content に 指定 で きる 値 ) 





0pen-quote CODE まま まま まま まま まま まま まま まま まま まま ませ ませ 1 251 
BOO 251 
display プロ パテ ィ 3 5 9V85 ia AA 王 7 0 GO 203 
(display に 指定 で きる 値 ) 
akiraetews stsiisras 203 
BEG25 01 23 を. が 3 02 93 9223. Ns 203 
BS 人 051 お 4 は 4663 SG dsi NT Reiahs 203 
1691( に WEKKRXKEEKT た また CCCEKEPKGETCTOCTC 203 
ROBE2 還 計 45 30 200.3 2 Y2He Ns 164 
(f1oat に 指定 で きる 値 
Teft… 


(font-family に 指定 で きる 値 ) 


CUPSTVG6 ーー ドド ドド ドド ドド ドド ドド ドゥ に に に に ピ に ピピ 
fantasy ドド ドド 
ImOT0SDaCe・ 
sans-serif 

















font-style に 指定 で きる 値 ) 


fta11Cttーー ト (ーー ドド ドド ドド トト トト トレ に トト トド こい 092 
oblique RE た 092 
normalー ド ドド ドド ドド ドド に に レー 093 
font-weight プロ パパ テイ …… の 0 ドド の mmmt 092 
font-weight に 指定 で きる 値 ) 
032 だ な 2242 092 
OHBTRKCGRRRGSRESRKEIRPRREESSSiSIAGG1sD 092 
NEIL に JOEEEEEEECOEEECEEEPEEEEEEEEEEEEEEEEEEE 092 
norma] CE まま まま まま まま まま まま まま まま まま まま 092 
height プロ パテ ィ ー… ド ドド ドド ドド ドド ドー ドー 144 
(height に 指定 で きる 値 ) 
測 和 他人 0VRNWgSetetdeiefda0 aois4sasSstae37x が か 





1etter-spacing プロパ ティ … 
(1etter-spacing に 指定 で きる 値 ) 


本 人 F 衣 KANSNNINHRRRERDR2HSSCSTNG7a 098 
11ne-he1ght プロ パテ ィ で で に で に 088 
1ine-height に 指定 で きる 値 ) 

1 HI ナビ PC てい 088 
1ist-style プ ロ パ テイ ィ イー で で の rm me の 195,200 
11st-style-1mage プ ロ パ ティ の で の 195,198 

1ist-style-1mage に 指定 で きる 値 ) 

ur1() CE た た まま た ドド すま すま た さま まま すすま ます すま きま すま すす 1 198 

1I【UI【-EEEEEESEESSSSSKE ま た た た たま た た たま た まま まま まま まま 198 
1ist-style-position プロ パテ ィ ーー…… 195.199 

(1ist-style-pos1tion に 指定 で きる 値 ) 

1nSTdG 

ou も ts1de バー で つい (の や ドド ニニ ドド 





1ist-style-type プ ロ パ ティ - 
(1ist-style-type に 指定 で きる 値 ) 


circ1eーー ド ーー ドー ドー ドド ドド に に レ に に て 195 
decimal ーー ド ーー ドド ドー ドド ドー ドー 196 
decimal-leading-zerO ドー ドド ドド 196 
di SS 195 
1ower-alDha・ ーー ドー ドー ドー ドド ドー 196 
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33 和 を 


(の EX 











1ower-greek… バ ーー ドド ememeereeenm 196 
1ower-latin 一 ーー ドド ドド ドド に レレ レレ レレ 196 
1ower-roman・ 196 
半 芝 R22GIZR8fx. aic 人 S2SEe PCYCAG 195 
sdUare 195 
MBPS か AMIAKESYSRSG 196 
Upper-latin- 196 
MDDSIDSIDOIOMNTECSNGIGx2dtovokto7 RC に メーa こ CGI 196 

marg1n プ ロ パ ティ ドド ドド ーー ドー 136 
マー ジン 関連 の プロ バテ ィ に 指 きる 値 
autO ーー ドド ドド ドド ドド ドド に に レレ に レレ に に に に に に に に に に に に に 137 

marg1n-bottom プ ロ パ テイ ドド ドー 136 

margin-1eft プ ロ パ ティー ドー ドー ドー 136 

marg1n-r1ght プ ロ パ ティ ー… ド ドド ドド ドド ドー 136 

margin-top プロ パテ イィ イー ドド ドド ドド ーー 136 

maxX-height プロ パテ イー ドド ドド ドド レー に レー 144 


っ 


(max-height に 指定 で きる 値 








aewiidthZ ロ 7 デイ 7 に ogxomamniaiasccoteuei22ioc 144 
max-width に 指定 で きる 値 ) 
nOnE 145 
min-height プロ パテ ィ ・ 144 
min-width プ ロ パ ティ イー ドド oe 144 
opac1ity プ ロバ パテ イー ドド ドド err 085 
out]11ne プ ロ パ ティ に TETT 233 








(00 人 NRGOIIODZ( 帳 0 GS2CCTRG362A24X 233 
OM も mesgyile 加 7 で teyYesyewry 233 
(out1ine-style に 指定 で きる 値 
dashed ーー ドド ドド ドド ドド ペー 234 





out]fne-width に 指定 で きる 値 ) 








med1iUm ドド ドド ドド ドド ドド ドド ドド ドド に ドレ に ドレ に に トレ に に に に に に に 234 
QWBRTTOWOE7Y 207 

overflow に 指定 で きる 値 ) 

auto CC まで た ま まき 生ま まま 生ま まま まま あお まま また 

hidden 一 ーー ドド ドー ドド ドレ に に レレ イー 

scCTO11 ドー ドー ドド ドド ーー ドド ドド ドレ に に レレ ーー 

visible・ 
padding プロ パテ イィ ーー ドド ドド ドド ーー 139 
padding-bottom プ ロ パ ティ ーー ドー ドド ーーー 139 
padding-1eft プロ パテ ィ イー ドド ドド ドー ドー ドー ドー 139 
padding-right プロ パテ イィ ーー ドー ドド ーー ドー 139 
padding-top プロ パテ ィ ー… ド ドド ドド ドド ーー ドー 139 
position プロ パテ ィ 









position に 指定 
absolute ドド ドド ドド 


Sa も xs 
quotes プ ロ パ ティー ドド ドド 


quotes に 指定 で きる 値 


resize に 指定 で きる 値 


VeT も 1 228 
text-al1ign プロ パテ イィ ーー ドー ドド ドド に 096 
text-a]lign に 指定 で きる 値 ) 
center CK ます 





text-decoration プロ パテ ィ ・・ 


text-decoratton に 指定 で きる 値 





WesBIDOMBINNStikeHme keitioiA SANeTuLAAASR GR 4 < 097 
nOTE 097 
OoVer] III た 0E た たま た また まま またまた た た また まま まま たま まま まま 097 
under] Tn 097 
text-emphasis-style プ ロ パ テイ ーーーーーーー 105 
circleーーー ド ーー ドド ーー ドド ドド ーー に に レレ レレ レレ に に に に ピピ 105 
dO も ーー 105 
ME は MK- 地 GHCCIOCOYNDDLDUTCTELKKS れ 0 105 




















105 
105 
*s 105 
sesame ーー ドド ーー ドド ドド て て 105 
triang1e ーー ドー ドー ドー に レレ に に に に て 105 
text-indent プロ パテ ィ 099 
text-shadow プロ パテ ィ - 094 
text-shadow に 指定 で きる 値 ) 
誠人 eror2PYSBESS に SG 人 EC 094 
text-transform プ ロ パ ティ イー ドド ーーー 100 
(text-transform に 指定 で きる 値 
cap1italize aaaaaiaaialalgga:aiaraia 101 
1owercase 101 
none………… . 101 
UDDeTCaSe 101 
transform プ ロ パ ティ イー ドド ドド ドド ドー 266 
transform に 指定 で きる 値 
none…・ ・267 
rotate() ドド ドド 266 
skew(O) 267 
skeW(O ーー ドド ドド ドド に に レレ レレ に に に に に に に に に に に に に レー 267 
skewY() ・…・ - 267 
sCale( ) OILILIDILILIORIORENORRCRORRNRORRRORREIRR き る 266 
scaleX() ドド ドド ドレ レレ に に に に に に に に に に し ピー 266 
scaleY( う ーー ドド ドド ドド ドド 266 
紫 た DS 人 か memoymisreeiereiseneareoyetseeeir size 267 
translateX() ーー ドド ドド ドド ドド ーーー 267 
translateY() ーー ドド ドー ドー ドー ドド ーー 267 
transform-or1igin プロ パテ ィ イード ドド ドド ドー 269 
(transform-ortgin に 指定 で きる 値 
bottom ーー ドー ドド ドー ドド ドド ドド に に に に に に に に に に に ピー 269 
center OIL 生生 き 王 生き き きき 269 
1eft・・ - 269 
IIUIGGGCEERHEEEEEEEEEEEEEPEEEEEEEEEEEEEESE 269 
KU] DEE まま まま まま ます まま まま EE まま 269 
trans1ition プロ パテ イィ 上 ( バ ドー ドー ドド ドー ドド ーー ドー ドー 276 
transition-property プロ パテ ィ s の 271 





transition-property に 指定 で きる 値 
a11 





transitiion-dea ザ プロ パテ イ ooxeveeeeceeeeen 273 
transition-timing-function プロ パテ ィ 274 


(transition-timinq-function に 指定 で きる 値 ) 
274 


・274 






ease-1n ・・ 





eaSse-jn-oOut PPE まま まま た また まま まま ませ または 六 入っ 274 
eaSe-Out PE たま まま まま まま たま まま まま まま まま ま まま まま 274 
]inear PCERKERREERREEREEROERORCERUERLRRLRRERREJ 274 
ver も cal-al1gn プ ロ パ ティ で" 186 
vertca1 -a]iqn に 指定 で きる 値 ) 
base]line バー ドー ドド oo に 186 
bottom COCP さす で で です で で を すさ で で た すす すす ます たせ ます ます すす 1 186 
middle ROCKETEECEEREEERIEERICERRCEE 186 
sub COCP た EE ミミ で すす を すす すすま すま た また た すす た た たま た たまき せま 186 
SuPeT POSEREEEEEEEERERRERRUIORURRERRRUEERE コ 186 
top RCCPCECEETEEEEEEEEEEEEEEEIEPEEEIRPEPEPEPEEEE 186 
visibi11ity プロ パテ ィ 205 
visibil 5 ) 
hidden・…… 206 
visible ・206 
white-space プロ パテ ィ GSIZ2AEAtEGYtEa Zs 102 


white-space に 指定 で きる 値 








102 

・102 

102 

102 

Pre-WPaD 102 

width プ ロ パ ティ イド 144 
width に 指定 で きる 値 

04003G TGC2091e 人 Ce 144 





103 
(writing-mode に 指定 で きる 値 

hortzon も ab oe 104 
VePEHGa 1 に JI SsGCCGSGSS2SG2D epi 104 
vertical-rl…… ・ 104 
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還 大 藤 幹 (お お ふじ みき ) 


札幌 在住 大学 卒業 後 、 複 数 の ソフ ト ハ ウス に 勤務 し 、CAD ア プリ ケー ショ ン ・ 航 空 関連 シス テム ・ 医 療 
関連 シス テム ・ マ ル チ メ ディ アタ イト ル な どの 開発 に 携わる 。1996 年 より Web の 基本 技術 に 関す る 書籍 
の 執筆 を 開始 し 、2000 年 に 独立 。 そ の 後 、 ウ ェ ブ コン テン ツ JIS (JIS X 8341-3) ワー キン グ ・ グ ルー プ 主 
査 、 情 報 通信 アク セス 協議 会 ・ ウ ェ ブ アク セ シ ビ リティ 作業 部 会 委員 な ど を 務め る 。 現 在 の 主 な 業務 は 、 
Web デ ザイ ン に 関連 する 書籍 の 執筆 の ほか 、 全 国 各地 で の セミ ナー 講師 な ど 。 

著書 は 「 基 本 か らし っ か り わ か る Movable Type 5 カス タマ イズ ブッ ク 』「 基 本 か らし っ か り わ か る 
WordPress 3.x カス タマ イズ ブッ ク 』「Web プロ フェ ッ シ ョ ナル の た め の 黄 金 則 XHTML+CSS 虎 の 巻 
[世界 の 「 最 先端 ] 事例 に 学ぶ CSS ベ スト ・ プ ラク ティ ス 』「 世 界 の 「 最 先端 事例 に 学ぶ CSS プロ フェ 
ッ シ ョ ナル ・ ス タイ ル ]』 (以上 、 マ イナ ビ )、『 詳 解 HTML&XHTML&CSS 辞 典 」「Pocket 詳解 HTML5& 
CSS3 辞典 ] (秀和 シス テム )、「10 日 で お ぼ え る CSS/CSS3 入門 教室 ] ( 翔 泳社 ) 、「XHTML+CSS 趣 高速 
コー ディ ング 術 ]( ソ シム ) な ど 多 数 。 
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但 定 価 は カバ ー に 記載 し て あり ます 。 

便 乱 丁 ・ 落 丁 に つい て の お 問い 合わ せ は 、TEL : 048-485-2383 (注文 専用 ダイ ヤル )、 電 子 メ ー ル : 
sas@mynavi.jp まで お 願い いた し ます 。 

代 本 書 は 著作 権 法 上 の 保護 を 受け て いま す 。 本 書 の 一 部 ある い は 全部 に つい て 、 著 者 、 発 行者 の 許諾 を 
得 ず に 、 無 断 で 複写 、 複 製 す る こと は 禁じ られ て いま す 。 

借 電 話 に よる ご 質問 、 お よび 本 書 に 記載 され て いる 内 容 以 外 の ご 質問 、 本 書 の 実習 以外 の お 客 様 個 人 の 
作業 に つい て の ご 質問 に は 、 一 切 お 答え で きま せん 。 あ ら か じ め ご 了承 くだ さい 。 
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@ よく わか る PHP の 教科 書 
た に ぐち まこ と [ 著 ] 
ISBN978-4-8399-3314-2 
いま さら だ けど 、PHP を 勉強 し た い 。 も う 1 回 、 
PHP を し っ か り 理 解 し た い 。 そ ん な 人 に ぴっ た り の 入門 書 で す 。 
平易 な 言葉 で 分 か りや すく 書か れ て いる の で 、 
プロ グラ ミン グ の 用 語 や コー ド に 拒否 感 が ある 人 で も 、 
すい すい 読み 進め る こと が で きま す 。 


@ よく わか る iPhone ア プリ 開発 の 教科 書 
iOS 5&Xcode 4.2 対応 版 
森 巧 尚 [ 著 ] 
ISBN978-4-8399-4173-4 
好評 の 「 よ くわ か る iPhone ア プリ 開発 の 教科 書 」 を 、 
0S の 最新 版 iOS 5 と 最新 開発 環境 Xcode 4.2 に 対応 させ て 
全面 改訂 。 イ ラス ト 図解 オ サ ン プル 制作 で 、 
基本 か らし っ か り マ スタ ー で きる 、iPhone ア プリ 開発 の 入門 書 で す 。 


@W よく わか る Android アプ リ 開 発 の 教科 書 
Android SDK 2.3 対応 
高見 知 英 、 松 田 幸 一 、 椎 木 啓 祐 、 嶋 崎 聡 [ 著 ] 
ISBN978-4-8399-3849-9 
Android ア プリ ケー ショ ン 開 発 の た め の 、 本 格 派 の 入門 書 。 
Android の 概要 、 特 徴 か ら 、 開 発 環境 の 構築 方 法 、 
制作 の 基本 と 流れ 、 他 の 環境 と 比べ て 注意 する べき 点 、 
Android マー ケッ ト へ の アッ プ ま で 。 


@ よく わか る JavaScript の 教科 書 
た に ぐち まこ と [ 著 ] 
ISBN978-4-8399-4187-1 
JavaScript の 基本 か ら 、jQuery、jQueryMobile まで 1 冊 で 。 
プロ グラ マ で な い 人 で も 読み や すい よう に 、 やさし い 言 葉 を 
使い な が ら 、1 つ ひと つ 丁 寧 に 説明 し て いる 本 で す の で 、 
途中 で 迷う こと な く 学 習 を 進め る こと が で きま す 。 


ISBN978-4-8399-4348-6 
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